[Paul:] Hi, I'm Paul Bohman, and I'm the director of training at Deque Systems. And one of the easiest things that you can do to make web pages more accessible to people that use screen readers is to add a language attribute to the <html> element at the top to specify the language for the document as a whole, and then also specify any changes to the language by adding a lang attribute to any in-line elements where the language actually changes.
You can see in this document we have lang="en", and that specifies that this is an English language document. When we listen to this with a screen reader, the screen reader is going to pronounce the words in the document based on the language that it finds in the lang attribute on the <html> element. If no language attribute is set in the <html> element, then the screen reader will pronounce the text using the pronunciation rules of the language that the user has set as the default language in the screen reader preferences.
And that may be fine if the user is always reading web pages in the same language, but if the person is bilingual, or if they happen to go to a page written in a different language, it will not read with the correct pronunciation rules unless the web developer specified the language in the document's <html> element.
Here's a document written in English and specified in the source code as lang="en" in the <html> element.
We're going to listen to it with the JAWS screen reader.
[Screen reader:] "I say to you today, my friends, so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream.
"I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal."
[Paul:] That's what it sounds like if we set the language correctly. Now let's imagine that the user has the screen reader set to Spanish, because that's the language that they're most comfortable with, then they come to a web page that's written in English, but it does not have the lang attribute specified, saying that it's an English document. What the screen reader is going to do is read the English words with Spanish pronunciation rules, and it's going to sound really bad.
Here's how it sounds with the JAWS screen reader.
[screen reader speaking indistinctly]
[Paul:] Okay, so, obviously that was pretty hard to understand. What you just heard was English words read with Spanish pronunciation rules, and it sounded terrible. I mean, it's just not the right pronunciation, and that's what happens if you don't set the language correctly.
You also want to make sure that if you have any changes to the language in the middle of the document that you specify what language it was changed to using the lang attribute on the containing element.
And that could be on the <span> element; it could be on a paragraph; it could be on a table; it basically could be on any element that can receive an attribute. And you specify the language there, and then the screen reader will switch language libraries so that it will read the correct pronunciation when it comes to that language.
You can see at the top of this document we have lang="en". We've specified English as the main language for the document as a whole.
But then we have this one phrase right here that says "No comprendo nada de lo que dices" in Spanish, and we specify the language of that section using lang="es" which is the international code for Spanish, español.
When we do that, the screen reader will read first using the pronunciation rules of the default language, which in this case is English.
And then when it comes to the Spanish phrase, it will switch to reading it in Spanish.
This is how it sounds with the JAWS screen reader.
[Screen reader:] While in Spain, my friend tried to speak Spanish, but she wasn't very good. Everyone kept saying "No comprendo nada de lo que dices."
[Paul:] Okay, so maybe you don't understand Spanish, but you can probably tell that it did use a different set of pronunciation rules when it read the Spanish phrase as compared to the English phrase that preceded it. It sounded different, it sounded more authentic, and that's the benefit of using the lang attribute in-line. And then, of course, it read the English correctly to begin with because it had the English language specified correctly in the document.