We Need To Use The Lang Attribute More

June 14, 2018

I love different languages and I admire polyglots. I'm currently learning Portuguese and brushing up on Spanish and French on Duolingo and my reading is much better than my speaking. But what if you had impaired sight and needed to use a screen reader. Foreign languages written on English websites are read in English voices as if they were English words. That's no good to a foreign language speaker. But there is a solution.

In HTML, there's a lang attribute that allows you to set a page's language and, if you need to, add the language to any number of words or sentences for others. When I wrote this article, I had to write something in Portuguese. I added the following code to the paragraph:

<span lang="pt">O Sexto</span>

I then added some style to it with CSS:

:lang(pt) { 
    font-style: italic;
    color: #00661a;
    border-bottom: 1px solid #ff0017;
}

The colours were just for fun but it's a great way for those learning the language to be able to differentiate words and practise while those who require screen readers can understand what is written in their mother tongue.

For more info on the lang attribute, check out a full explanation on Mozilla's MDN database, the CSS :lang() Selector on W3Schools, and how to style them on the W3 website.