If you don't specify a language for your Web pages, it can confuse Screen Readers and other Assistive Technology. I built this demo Web site to demonstrate the problem. The site's HTML source code is available here on GitHub. This is the site's home page, and is essentially the same as this blog post, except that it'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 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