WCAG 3.1.2 Language of Parts: Marking Language Changes in HTML

Level AA Understandable WCAG 3.1.2

What This Criterion Requires

WCAG 3.1.2 requires that 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 surrounding text. This is accomplished by using the lang attribute on HTML elements that contain text in a different language than the page default set in the html element. For example, if a primarily English page contains a French quotation, the containing element should have lang="fr". This allows screen readers to switch to the correct pronunciation engine when reading the foreign-language text, ensuring it is spoken understandably rather than being mangled by the wrong language engine. The lang attribute uses ISO 639-1 language codes such as en, fr, de, es, ja, zh, and similar. This criterion builds on 3.1.1 (Language of Page) which requires the default page language to be set, by extending the requirement to individual passages within the page that differ from that default.

Why It Matters

When screen readers encounter text in a different language, they need to know the language in order to apply the correct pronunciation rules. Without a lang attribute marking the language change, the screen reader will attempt to pronounce the foreign text using the rules of the page default language, which can produce completely unintelligible output. For example, a French phrase read with English pronunciation rules sounds garbled and confusing to the listener. This is especially problematic for screen reader users who are multilingual and expect to hear each language pronounced correctly. Users who are learning a language also benefit from correct pronunciation. Braille translation systems also use language information to apply the correct braille code for different languages. Beyond assistive technology, language markup helps browser spell-checkers apply the correct dictionary, enables automatic translation tools to handle mixed-language content more accurately, and improves search engine understanding of the page content. Proper language identification is a fundamental aspect of making content machine-readable and accessible.

Common Failures and How to Fix Them

Foreign language text without lang attribute

A page in English contains quotes, phrases, or paragraphs in another language but does not mark them with the appropriate lang attribute. Screen readers mispronounce the foreign text.

Inaccessible

<html lang="en">
<body>
  <p>The French term for goodbye is "au revoir" and is used in 
     formal contexts.</p>
  <blockquote>
    La vie est belle quand on la partage avec les autres.
  </blockquote>
</body>
</html>

Accessible

<html lang="en">
<body>
  <p>The French term for goodbye is 
    <span lang="fr">"au revoir"</span> and is used in 
    formal contexts.</p>
  <blockquote lang="fr">
    La vie est belle quand on la partage avec les autres.
  </blockquote>
</body>
</html>

Multilingual navigation without language identification

A website offers navigation in multiple languages on the same page (such as a language selector or bilingual navigation) but does not mark each language section with the appropriate lang attribute.

Inaccessible

<nav>
  <ul>
    <li><a href="/en/about">About Us</a></li>
    <li><a href="/ja/about">About Us (Japanese)</a></li>
    <li><a href="/es/about">Sobre Nosotros</a></li>
  </ul>
</nav>

Accessible

<nav>
  <ul>
    <li><a href="/en/about" lang="en">About Us</a></li>
    <li><a href="/ja/about" lang="ja">About Us (Japanese)</a></li>
    <li><a href="/es/about" lang="es">Sobre Nosotros</a></li>
  </ul>
</nav>

How to Test

Identify all passages of text on the page that are in a different language than the page default language specified in the html lang attribute.
Inspect the HTML of each foreign-language passage and verify that the containing element has a lang attribute with the correct ISO 639-1 language code.
Test with a screen reader to confirm that the reader switches pronunciation when encountering marked language changes.
Verify that proper names, widely adopted loan words, and technical terms do not need lang attributes (they are exempt from this criterion).

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Related WCAG Criteria

WCAG 3.1.1