3.1.2 - Language of Parts

Learn how to identify the language of each part in code when a page has content in multiple languages. Follow the Web Content Accessibility Guidelines (WCAG) to ensure proper language identification for assistive technologies.

Summary

When a page has content in more than one language, it is important to identify the language of each part in code.

Assistive technologies need to understand when content is displayed in a language that is different from the primary language of the page. Proper language identification ensures an inclusive experience for all users.

Requirements

Content that is written in a different language from the main language of the page should be identified in code.

For multilingual content, any part of the page that varies from the default language must be defined in the code to ensure the correct speech synthesizer is used. This includes image alternatives, form labels, quotes, objects, media alternatives, and other elements. Language identification overrides the specified default language and any language and dialect settings specified on the user's device.

Example

The homepage of the website of the Canadian Government is written in English, so it has <html lang="en">. On the homepage, there's a link to access the version written in French. The link text reads "Français". Since the link text is written in French, the language of the link text is identified with <a lang="fr">.

Common Mistakes

  • Content uses a different language, but the change in language is not identified in code.
  • Content uses a different language, but the wrong language is identified in code.

Why?

Proper language identification ensures that screen readers switch to the appropriate accent and pronunciation for that language.

Correct pronunciation is crucial for understanding, especially for users of assistive technologies like screen readers, which may use different speech synthesizers for different languages. For example, the word "chat" has different meanings in English and French, and the pronunciation differs accordingly.

Official Wording in the Web Content Accessibility Guidelines

3.1.2 Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)

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

Guidance for Design

  • When designing a page or screen with content in a language different from the main language, ensure that developers are aware of this and highlight it in the designs.

Guidance for Web

  • After identifying the main language of the page using the lang attribute on the html element, use the lang attribute again on any part of the document that is written in a different language.

Note: It is recommended to use the two-letter code representing the language (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 the content being pronounced with a British accent, regardless of the user's preferences, which is not ideal.
  • Using just lang="en" allows the content to be pronounced with the accent that matches the user's preferences.

Examples

<html lang="en">
  ...
  <body>
    <p>This page is written in English.</p>
    <p lang="fr">Sauf pour ce qui est écrit en français.</p>
  </body>
</html>

<html lang="en">
  ...
    <h2>Upcoming Spanish Holidays</h2>
    <p lang="es">Les Fogueres de Sant Joan.</p>
  ...
</html>

Failure example

<html>
  ...
    <h2>Upcoming Spanish Holidays</h2>
    <p>Les Fogueres de Sant Joan.</p>
  ...
</html>

<html lang="en">
  ...
    <h2>Upcoming Spanish Holidays</h2>
    <p lang="fr">Les Fogueres de Sant Joan.</p>
  ...
</html>

More guidance for Web

Discuss on Twitter • View on GitHub • Main Sources