3.1.1 - Language of Page

Learn about the importance of identifying the language of a web page in the code for accessibility purposes. Follow the Web Content Accessibility Guidelines (WCAG) to ensure proper language identification.

Summary

Identify the language of the content on a web page in the code to enhance accessibility.

Requirements

  • The default language for the content of a page or app must be defined in the code.

Why?

This ensures that screen readers automatically use the correct speech libraries for accurate accent and pronunciation.

Correct pronunciation plays a crucial role in facilitating understanding, especially for users of assistive technologies like screen readers. Different languages may require different speech synthesizers. For instance, the word "chat" has a distinct meaning when pronounced using English pronunciation compared to French pronunciation.

Other Benefits for the Web

Correctly setting the lang attribute in HTML provides additional benefits:

  • Quotation marks surrounding the content of <q> elements vary based on the language.
  • The spellcheck attribute relies on language identification to function effectively, especially for multilingual users, as browser heuristics may not be perfect.
  • Input components for dates and times also require language identification since time and date formats differ across countries.

Official Wording in the Web Content Accessibility Guidelines

3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)

For a detailed explanation of this guideline, refer to the W3C's documentation, which includes techniques and examples.

Guidance for the Web

  • The language of the page should be identified using the lang attribute of the html element.
    • For example, the <html> element of a page with English content should include lang="en".

Note: It's recommended to use the two-letter language code (e.g., lang="en") rather than including the country code (e.g., lang="en-gb" or lang="en-us"):

  • Using lang="en-gb" would result in screen readers pronouncing the content with a British accent, regardless of the users' preferences, which is not ideal.
  • Using just lang="en" allows the content to be pronounced with the accent that matches the users' preferences.

Example

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

Failure example

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

Common mistakes

  • No lang attribute is present on the html element.
  • The lang attribute is present on the html element, but it incorrectly identifies the language of the page.

More guidance for Web

Discuss on Twitter • View on GitHub • Main Sources