3.1.2 Language of Parts

Who it helps

Screen readers switch voices and pronunciation rules based on lang, so unmarked foreign text gets read with the wrong accent and can become unintelligible. Braille displays, translation tools and hyphenation also rely on it.

How to meet it

• Add lang to the element that wraps the passage, such as <blockquote lang="de"> or <span lang="fr">.
• Use valid language codes from BCP 47, such as es, fr, de, pt-BR or zh-Hans.
• Mark the names of languages in a language switcher in their own language, such as <a lang="es">Español</a>.
• Exceptions: proper names, technical terms, words of indeterminate language, and borrowed words that are now part of the surrounding language don't need lang.
• Set the page's default language on the html element first; that is 3.1.1.

Examples

<html lang="en">
  <body>
    <p>Goethe wrote:</p>
    <blockquote>Wer nicht vorwärts geht, der geht zurück.</blockquote>
  </body>
</html>

<a href="/es/" lang="spanish">Español</a>

<html lang="en">
  <body>
    <p>Goethe wrote:</p>
    <blockquote lang="de">Wer nicht vorwärts geht, der geht zurück.</blockquote>
  </body>
</html>

<a href="/es/" lang="es" hreflang="es">Español</a>

Common mistakes

• Using a language name like "spanish" or a country code like "jp" instead of a valid language code.
• Leaving language switcher links unmarked, so "Deutsch" is read with English pronunciation.
• Marking every borrowed word, such as "café" or "karaoke", which the exception doesn't require.
• Confusing hreflang, which describes the linked page, with lang, which describes the link text.

Related criteria

• 3.1.1 Language of Page
• 1.3.1 Info and Relationships
• 4.1.2 Name, Role, Value

Official W3C explanation of 3.1.2