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
Code begins
<html lang="en">
[...]
<p> He maintained that the DDR (German Democratic Republic) was just a <span lang="de">Treppenwitz der Weltgeschichte</span>.
</p>
Code ends
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
Code begins
<ul>
<li lang="de"><a href="[...]">Deutsch</a></li>
<li lang="fr"><a href="[...]">Français</a></li>
</ul>
Code ends
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 thexml:lang
attribute.