Language

Language of page

The <html> element must have a lang attribute value that identifies the primary language of the page. Without it, the page content may be rendered as gibberish by some screen readers.

Users configure screen readers with a default language and that’s the language used to declare a page if the <html> element is missing a lang attribute. For instance, a Francophone user's screen reader will attempt to read a page without a lang attribute in French, even if it is written in English. It’s an issue for screen reader users who understand multiple languages and visit websites written in all of them.

Follow these best practices for language of page:

Add a lang attribute to the <html> element to set the default language for the entire page.

  • For English: <html lang="en">
  • For French <html lang="fr">
  • For other languages, choose the appropriate language code from ISO-639. Use the shortest available language code.

Use a three-letter code if no other code is available. ISO 639-2 three-letter code.

You may add a region subtag if you need to say that this is the language as spoken somewhere in a particular; e.g., lang="fr-CA" indicates French as spoken in Canada.

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

Language of parts

Any part of the page that is not written in the page’s primary language must specify its language. Set the lang attribute on the text’s parent element, with a value indicating the language of the part.

Identifying changes in language is important for a couple of reasons:

  • It allows braille translation software to follow changes in language
  • Speech synthesizers that support multiple languages will be able to speak the text in the appropriate accent with proper pronunciation

Examples

A German phrase in an English document:

HTML

<html lang="en">
 [...]
 <p> He maintained that the DDR (German Democratic Republic) was just a <span lang="de">Treppenwitz der Weltgeschichte</span>.
 </p>

Alternative language links [for example: An HTML Web page includes links to versions of the page in other languages (e.g., Deutsch, Français, etc.]

HTML

<ul>
   <li lang="de"><a href="[...]">Deutsch</a></li>
   <li lang="fr"><a href="[...]">Français</a></li>
</ul>

Follow these best practices for language of parts:

  • Insert lang attributes anywhere the default language changes to a different language
  • XHTML should use both the lang attribute and the xml:lang attribute.

Related WCAG resources

Related WCAG resources

Success criteria

Techniques

Back to top