Your Site Speaks What Language? Don't Keep Screen Readers Guessing!

- July 19, 2018

If you don't specify a language for your Web pages, it can confuse screen readers and other Assistive Technology. I built a demo Website to demonstrate the problem. The site's HTML source code is available on GitHub. Its homepage is essentially the same as this blog post. But that's followed by 3 demo pages:

  1. English: No lang — This demo page is written in English. But I intentionally omitted an HTML lang attribute. As a result, screen readers have to guess what language to use. An English screen reader guesses it's in English, which in this case is right.
  2. Spanish: No lang — This page is a Spanish translation of the previous page. Again, I intentionally omitted an HTML lang attribute. As a result, screen readers still have to guess what language to use. An English screen reader guesses it's in English, but in this case that's wrong. It pronounces the Spanish words as if they were English, and reads the numbers as English.
  3. Spanish: lang='es' — This Web page is identical to the previous one, except that this time, I gave it an HTML lang attribute of lang='es'. The 'es' is for Español, which is Spanish for "Spanish". No more guessing for screen readers. Realizing the page is in Spanish, they pronounce it as Spanish, and read the numbers as Spanish.

Why is using the HTML 'lang' attribute important?

Assistive Technology (AT) such as screen readers, speech synthesizers, and Braille translators need to know what language a page is in, to speak or display it properly. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 include the need to do this a Level AA guideline. (Level AA means a website "must do" this to be considered accessible.) WCAG 2.0 calls this guideline Success Criterion 3.1.1: Language of Page. Adhering to such guidelines is a legal requirement for many websites worldwide.

Knowing a Web page's language is important for areas other than accessibility as well. Some search engines let users restrict search results to those of a specific language. Web browsers use different default fonts depending upon what language content is in. They use different fonts for Chinese, Japanese, and Korean than those they use for English. Spelling and grammar checkers need to know what language content is in, as do translation services. For more information, see the following 2 World Wide Web Consortium's articles on Internationalization: Why use the language attribute? and Styling using language attributes.

You can see and hear the importance of this first-hand

One of the best ways of doing so is with a screen reader. Microsoft Narrator comes free with Windows, and ChromeVox is a free extension for Google Chrome. But neither is a full featured screen reader, and the announcing in both of them seems unaffected by the HTML language attribute. NVDA (NonVisual Desktop Access), on the other hand, is a free, full featured Windows screen reader which handles this correctly. NVDA works best with Mozilla Firefox, so the following video uses NVDA with Firefox, on a "U.S. English" version of Windows (8.1), with NVDA's language set to "English".

Video


How do you use the 'lang' attribute?

It's easy to specify what language your Web page is written in. Just add the lang attribute, with the appropriate language code, to the end of your initial <html> tag. For example, to specify English as the language of your Web page, you simply replace:

<html>

with:

<html lang='en'>

For languages other than English, see the ISO 639-1 Codes listed in the U.S. Library of Congress's Codes for the Representation of Names of Languages or Wikipedia's List of ISO 639-1 codes.

What if just some of your Web Page is in a different language?

The W3C's WCAG 2.0 Guidelines include a Level AA ("should have") guideline for this. It's Success Criterion 3.1.2: Language of Parts. Adhering to AA guidelines is also a legal requirement for many websites worldwide. The details of the Language of Parts guideline are beyond the scope of this blog post. But you can read more about it in Maxability's 3.1.2 Language of Parts, Lane Community College's Understanding WCAG 2.0: 3.1.2 – Language of Parts or the W3C's own Understanding Success Criteria 3.1.2

What if you allow the user to select between multiple languages?

Although I haven't done this myself, I've seen this discussed in a StackOverflow Question/Answer on Using Javascript to change website language.

The W3C's Internationalization page on Declaring language in HTML is a real-world example using a somewhat different approach. There, the user can select whether to view the page in English, German, Spanish, French, Brazilian Portuguese, or Russian. If you change the selected language, you're taken to a language-specific URL. There, the page content is in the selected language, and the 'lang' attribute is set to match. I verified that the NVDA screen reader changes its pronunciation of the page content based on the selected language.