WCAG – 3.1.1 Language of Page (Level A)

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 lang attribute is present on the <span class="nt"><html></span> element.
  • The lang attribute 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 lang attribute of the html element.
    • The <html> element of every page with English content includes lang="en".
  • Note: It’s better to only use the two-letter code representing the language (like lang="en"), rather than including the country as well (like lang="en-gb" or lang="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.

Example:

<html lang="en">
<!--  -->
</html>

Failure example:

<html>
<!--  -->
</html>

References

  1. Using language attributes on the html element technique in the Web Content Accessibility Guidelines
  2. Using the HTML lang attribute by The Paciello Group
  3. Working with Language on the Web – W3C i18n tutorial
  4. Language on the Web
  5. On Use of the Lang attribute by Adrian Roselli
  6. Accessibility Guidelines- Github.io

Leave a Comment

Your email address will not be published.