WCAG 2.2 - Success Criterion
3.1.2 Language of Parts
Description
When a web page contains passages of text in a language different from the page's primary language, each such passage must have its language programmatically identified using the lang attribute on the containing element. This applies to any phrase, sentence, or block of content written in a secondary language, allowing assistive technologies to apply the correct pronunciation rules for that passage. Exceptions include proper names, technical terms, and words that have become part of the surrounding language's vernacular.
How To Test
- Identify all passages on the page that are written in a language different from the primary page language declared on
<html lang="...">. - For each such passage, inspect the surrounding markup in browser developer tools.
- Verify that an ancestor element (ideally the most immediate wrapper) carries a
langattribute with the correct language tag for that passage. - Confirm the language tag is a valid BCP 47 code (e.g.,
fr,es,de,zh-Hant). - Using a screen reader (e.g., NVDA with a multi-language synthesizer), navigate to the foreign-language passage and listen for correct language switching.
- Check that proper nouns, technical terms, and internationalised words used in the primary language context are not incorrectly wrapped.
- Run an automated audit with axe or a similar tool; note that automated tools cannot catch all cases and manual review is essential.
Testing Tools
- NVDA — Free screen reader for Windows. Download, install, and open Firefox to test the demo. Navigate using Tab and arrow keys, and listen to role, name, and state announcements from the page.
- VoiceOver (macOS) — Built into macOS. Enable with Cmd+F5, then open Safari or Chrome to test the demo. Use VO+arrow keys to navigate and hear semantic structure announcements.
- Lighthouse — Browser accessibility audit in Chrome DevTools. Open DevTools (F12), go to Lighthouse, run the audit to identify semantic and labeling issues.
Demo 1: Foreign Language Phrases
The French phrase below has no lang attribute. A screen reader will attempt to pronounce it using the page language (English), producing incorrect output.
The committee noted the proverb: "Vouloir c'est pouvoir."
No lang attribute on the French text.
The French phrase is wrapped in <span lang="fr">. A screen reader will switch to French pronunciation rules for that phrase.
The committee noted the proverb: "Vouloir c'est pouvoir."
<em lang="fr"> signals the language change to assistive technology.
Code
Demo 2: Multilingual Quotes
A German quotation without a lang attribute will be read using English pronunciation, distorting the meaning and flow.
«Ich bin nicht allein. Mit mir ist die Dunkelheit, das Licht und die ganze Welt.» — Max Beckmann
No lang attribute on the German quotation.
The same German quotation wrapped with <blockquote lang="de"> signals the language change, allowing screen readers to apply German pronunciation.
«Ich bin nicht allein. Mit mir ist die Dunkelheit, das Licht und die ganze Welt.» — Max Beckmann
<blockquote lang="de"> signals language to assistive technology.
Code
Demo 3: Right-to-Left Language Content
Arabic and other right-to-left languages need both lang and dir attributes. Without dir="rtl", text rendering and braille conversion may be incorrect.
السلام عليكم
Has lang="ar" but missing dir="rtl".
Both lang="ar" and dir="rtl" together tell screen readers, braille converters, and rendering engines the correct language and text direction.
السلام عليكم
Has both lang="ar" and dir="rtl" for correct rendering.
Code
Fail Explanation
If a page includes a French quotation, a Spanish phrase, or any extended foreign-language passage without a lang attribute on its container element, a screen reader will read that passage using the phonetic rules of the page's primary language. The result is severely distorted pronunciation that can make the passage incomprehensible to blind or visually impaired users who depend on audio output to understand the content.
Pass Explanation
A page passes when each foreign-language passage is wrapped in an element (such as <span>, <p>, <blockquote>, or <section>) that carries a lang attribute with the correct BCP 47 language tag for that passage (e.g., <span lang="fr">Bonjour le monde</span>). Screen readers will detect the attribute, switch to the appropriate voice or speech profile, and render the passage with correct pronunciation.
Notes
This criterion does not apply to proper names, technical terms, words of indeterminate language, or words that have been assimilated into the surrounding language. The key scope is extended passages of human-readable text where pronunciation would meaningfully differ between languages.
Techniques
WCAG techniques used in this demo: H58
Suggested Solutions & References
Curated from 5 real-world audit findings.