Loading...

The local language attribute matches the actual language

3.1.2 Language of Parts

Introduction

This check states that webpages with sections of text in different languages must have an associated lang attribute for each language. Examples include:

  • A webpage in English with a passage in French

    • One lang attribute must indicate that the language for webpage is English and another lang attribute must indicate the section in French.

  • An HTML webpage that includes links to the page in other languages
    • The text of each link is the name of the language, in that language. Ensure that the language of each link is indicated with a lang attribute. 

What

The lang attribute of the local language must correctly identify the language of the content it applies to. This ensures that assistive technologies, such as screen readers, can correctly interpret and pronounce the text.

The check verifies that:

  • The lang attribute is present and correctly set for sections of content in different languages.
  • The declared language matches the actual language used in the text.

For example, if a section of a webpage contains the French text, it must have lang="fr" applied.

Why

This section provides information about why this check is important. In addition, it includes some pass and fail examples.

An incorrect lang attribute can negatively impact:

  • Screen readers
    • They rely on the lang attribute to apply the correct pronunciation and reading rules.
  • Translation tools
    • Automated translation services may not detect the correct language, which leads to poor translations.
  • Spellcheck and grammar tools
    • Many assistive technologies use the lang attribute to apply appropriate spellcheck and grammar rules.

Examples

This section provides some pass and fail examples.

Pass examples

  • The correct language for the entire page is specified

    <html lang="en">
<head>
  <title>Welcome</title>
</head>
<body>
  <p>Hello, how are you?</p>
</body>
</html>
    • Why this works:
      • The declared lang="en" attribute matches the language of the page.

  • A section in a different language is correctly specified

    <p lang="fr">Bonjour, comment ça va ?</p>
    • Why this works:
      • The lang="fr" attribute matches the French text.
      • Screen readers use the correct pronunciation for French.

Fail examples

  • The wrong language is declared for the content

    <p lang="de">Hola, ¿cómo estás?</p>
    • Issue:
      • The text is in Spanish but it is marked with lang="de", which is German.
      • A screen reader incorrectly uses the German pronunciation rules.

    • Fix:

      <p lang="es">Hola, ¿cómo estás?</p>
      • The correct language lang="es" is applied.

  • A missing language attribute for multilingual content

    <p>Welcome! <span>Bienvenido!</span></p>
    • Issue:
      • The lang attribute to indicate the Spanish text is missing.

    • Fix:

      <p>Welcome! <span lang="es">Bienvenido!</span></p>
      • The Spanish text is correctly identified.

How

This section provides instructions on how to review and fix this issue.

How to review it

  1. Identify language changes within the webpage.
  2. Check if the lang attribute is applied to sections where the language changes.
  3. Confirm that the declared lang value matches the actual language of the text.
  4. Test with assistive technologies to verify the pronunciation.

How to fix it

  • Ensure that the primary language of the page is correctly declared in the <html> tag.

    • Example: <html lang="en">

  • Use lang attributes for content in different languages

    • Example: <span lang="fr">Bonjour</span>

  • Test the page with a screen reader to verify the pronunciation.

Additional resources

For information about language tags and how to find out the correct tag, visit the following article:

Language tags in HTML and XML

WCAG success criteria

3.1.2 Language of Parts

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Acquia Optimize Support
Back to Section navigation
Back to Site navigation