Using the lang attribute

The third in a series of How To guides from Nomensa. Matt Lawson, Web Developer at Nomensa discusses how to use the lang attribute to specify the language of your website and individual elements on a page.

Transcript

Hi everybody this is Matt from Nomensa and I’m here today to talk to you about the language attribute. This is an attribute that is often overlooked on a lot of sites we audit and when used correctly can greatly improve a visitor’s experience. The language attribute for those of you that don’t know for specifying the language of the text on the page this can be the whole page or a single word or sentence on the page. If I bring up my example we can see how both English and French is used on the page, predominantly English and we are going to add the language attribute to mark-up these changes in the language correctly. Firstly, to give you a better impression of how this can make a difference I have a demo available which shows these two sentences being read out by a screen reader. The first of which is being read in the correct accent the second of which is read using the incorrect language code so we can see how much of a difference it can make. [Audio clip] two sentences are read out in French. [Audio clip] two Sentences are read out in English. So we can hear how those two sentences can sounds very different depending on the language code specified. So lets see how we can add the language attribute to the page and individual components on the page. We do this by simply adding the language attributes to the HTML element, this specifies the main language of the document so a user can hear it in an appropriate language. If we had a single word or sentence in a different language, we will want to specify the language of those snippets seperately. To do that, we simply add the language attribute to the wrapping element. Now we have the sentence identified as French text so if a screen reader was to read out this sentence it will change into a French vocabulary and it will sound much better than the terrible English accent we had in the audio clip. We can also include the language attribute on links to specify the language of individual words; and you might want to consider adding the hreflang attribute which helps to specify the language of any linked documents such as pages or PDF’s that are in a different language. So there we have it, a quick introduction into two elements that are quite often overlooked and as we found out, can make a big impact on users such as those using screen reader technology.