3.1.2 Language of Parts

Level: AA | Principle: Understandable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

When a page contains content in a language different from the page's primary language, that content must be marked with the appropriate lang attribute. This allows screen readers to switch pronunciation rules so foreign-language words and phrases are read correctly.

Who This Affects

Screen reader users — without lang markup, the screen reader uses the page's primary language pronunciation for all text. French words pronounced with English rules are unintelligible, and vice versa.
Braille display users — language affects braille translation rules
Translation tool users — proper lang attributes help translation tools identify which parts need translation

Common Pitfalls

1. Foreign phrases without lang attribute

<!-- Bad: French phrase read with English pronunciation -->
<p>The restaurant's motto is <em>joie de vivre</em>.</p>

<!-- Good: lang attribute on the foreign phrase -->
<p>The restaurant's motto is <em lang="fr">joie de vivre</em>.</p>

2. Multilingual content blocks without lang

<!-- Bad: German paragraph on an English page -->
<p>Willkommen auf unserer Website. Wir freuen uns, Sie hier zu sehen.</p>

<!-- Good -->
<p lang="de">Willkommen auf unserer Website. Wir freuen uns, Sie hier zu sehen.</p>

3. Invalid lang attribute values

<!-- Bad: not a valid BCP 47 tag -->
<span lang="french">Bonjour</span>

<!-- Good -->
<span lang="fr">Bonjour</span>

4. Navigation or footer links in different languages

<!-- Bad: Japanese navigation on English page, no lang -->
<nav>
  <a href="/jp/">ホーム</a>
  <a href="/jp/about">会社概要</a>
</nav>

<!-- Good -->
<nav lang="ja">
  <a href="/jp/">ホーム</a>
  <a href="/jp/about">会社概要</a>
</nav>

How to Fix

Add lang attribute to elements containing different-language content

<html lang="en">
<body>
  <p>Welcome to our site.</p>

  <!-- Single foreign word -->
  <p>The concept of <span lang="de">Schadenfreude</span> has no
     direct English equivalent.</p>

  <!-- Foreign phrase -->
  <p>As they say in Italy, <q lang="it">la dolce vita</q>.</p>

  <!-- Entire section in another language -->
  <section lang="es">
    <h2>Bienvenidos</h2>
    <p>Gracias por visitar nuestro sitio web.</p>
  </section>

  <!-- Blockquote in another language -->
  <blockquote lang="fr">
    <p>L'essentiel est invisible pour les yeux.</p>
    <cite>Antoine de Saint-Exupéry</cite>
  </blockquote>
</body>
</html>

Common language codes

| Language | BCP 47 Tag | |----------|-----------| | English | en | | French | fr | | Spanish | es | | German | de | | Italian | it | | Japanese | ja | | Chinese (Simplified) | zh-Hans | | Korean | ko | | Arabic | ar | | Hindi | hi | | Portuguese | pt | | Russian | ru |

Exceptions

Proper nouns, technical terms, and words that have become part of the primary language do not need lang attributes. For example, "café", "résumé", and "kindergarten" are used in English without requiring a language switch.

How to Test

Read through the page and identify any content in a language different from the page's primary language (foreign phrases, multilingual sections, navigation in other languages).
Inspect each foreign-language element in DevTools and check for a lang attribute with the correct BCP 47 code (e.g., lang="fr" for French, lang="ja" for Japanese).
Verify the lang attribute values are valid BCP 47 tags (not full language names like "French").
Open a screen reader and navigate to foreign-language content. Confirm the screen reader switches pronunciation to the correct language.
Pass: Every passage or phrase in a different language has a correct lang attribute, and screen readers switch pronunciation accordingly.
Fail: Any foreign-language content lacks a lang attribute, has an invalid language code, or causes the screen reader to use wrong pronunciation.

axe-core Rules

| Rule | What It Checks | |------|---------------| | valid-lang | lang attribute values must be valid BCP 47 tags |