3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)
Requirements
- The default language for the content of a page or app must be defined in the code.
Why is it important?
This makes sure that screen readers automatically use the correct speech libraries for accent and pronunciation.
When listening, correct pronunciation helps understanding. For users of assistive technologies such as screen readers it is particularly important, as some have different speech synthesizers for different languages. For example, “chat” means something different when using English pronunciation rather than French.
Other benefits for the Web
In HTML, correctly setting the lang attribute also has other benefits:
- The quotation marks that appear around the content of
elements are different for different languages
. The spellcheck attribute needs it to function properly, especially for multilingual users, as browser heuristics aren’t perfect
.Input components for dates and times also need it, because times and dates are written differently around the world.
Summary
In code, identify the language that the content of the page is written in (English for example).
Common mistakes
- No
langattribute is present on the<span class="nt"><html></span>element. - The
langattribute is present on the<span class="nt"><html></span>element, but it incorrectly identifies the language of the page.
Design Guide
Language of Page Examples for Web
- The language of the page is identified using the
langattribute of thehtmlelement.- The
<html>element of every page with English content includeslang="en".
- The
- Note: It’s better to only use the two-letter code representing the language (like
lang="en"), rather than including the country as well (likelang="en-gb"orlang="en-us"):- If you use
lang="en-gb", the content will be pronounced by screen readers with a British accent, regardless of the users’ preferences. That’s not ideal. - If you use just
lang="en", the content will be pronounced with the accent that matches the users’ preferences.
- If you use
Example:
<html lang="en">
<!-- -->
</html>Failure example:
<html>
<!-- -->
</html>References
- Using language attributes on the html element technique in the Web Content Accessibility Guidelines
- Using the HTML lang attribute by The Paciello Group
- Working with Language on the Web – W3C i18n tutorial
- Language on the Web
- On Use of the Lang attribute by Adrian Roselli
- Accessibility Guidelines- Github.io