Our cooking class in Lyon
At the end of the class, the chef told us Il faut toujours goûter la sauce avant de la servir
, which means you should always taste the sauce before you serve it.
Read this post in another language:
Understandable · 3.1 Readable
Language of Parts WCAG 3.1.2 · Level AA
The language of each passage or phrase must be programmatically determinable when it differs from the page default. Exceptions are proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the surrounding language.
- Level
- AA
- Since
- WCAG 2.0
- Principle
- Understandable
- Guideline
- 3.1 Readable
Live demo
Listen to French words inside English text
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Listen next to the quotation and next to each language name, in both versions. The log shows which voice language was used each time.
Live example
Passes
The tools follow the version you last used.
What happened
Why it passes
The quotation and each language name carry their own lang attribute, so the speech switches to a French, German or Spanish voice for them and back again afterwards.
Why it fails
Nothing marks the change of language, so the voice for the page's main language reads the French quotation and the language names, and they are hard to understand.
Examples
Code that fails, and the fix
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
01What changes
+ lang="fr"
Fails
French quotation with no language
Live preview
<p>At the end of the class, the chef told us <q>Il faut toujours goûter la sauce avant de la servir</q>.</p>The page is in English and the quotation is in French, but nothing marks the change. A screen reader reads the French words with English pronunciation.
Passes
Language marked on the quotation
Live preview
<p>At the end of the class, the chef told us <q lang="fr">Il faut toujours goûter la sauce avant de la servir</q>.</p>lang="fr" on the q element tells screen readers to switch to French for the quotation and back to English after it. This is technique H58.
02What changes
+ lang="…" hreflang="…" ×3
Fails
Language switcher without lang
Live preview
<nav aria-label="Language"> <ul> <li><a href="/de/">Deutsch</a></li> <li><a href="/es/">Español</a></li> <li><a href="/hi/">हिन्दी</a></li> </ul></nav>Each language name is written in its own language, but the links inherit the page's English, so screen readers try to read all three names with an English voice.
Passes
Each language name marked
Live preview
<nav aria-label="Language"> <ul> <li><a href="/de/" lang="de" hreflang="de">Deutsch</a></li> <li><a href="/es/" lang="es" hreflang="es">Español</a></li> <li><a href="/hi/" lang="hi" hreflang="hi">हिन्दी</a></li> </ul></nav>lang sets the language of the link text, so each name is spoken correctly. hreflang only describes the language of the linked page; it does not change how the link text is read.
Passes
Borrowed words need no lang
Live preview
<p>Meet us at the café on Mill Street for a rendezvous at noon.</p>Café and rendezvous have become part of English, so they fall under the criterion's exception and need no lang attribute.
Why it matters
Who it helps
Screen readers switch pronunciation rules only when a change of language is marked, so quotations and passages in other languages are read intelligibly. This helps blind users and anyone relying on text-to-speech or translation tools.
W3C: Understanding 3.1.2Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
Checking it
A few concrete steps. Automated tools find some failures; most need a person.
- Identify passages, quotations, and links written in a language other than the page default.
- Confirm each one sits inside an element whose lang attribute gives the correct language code.
- Listen with a screen reader to confirm the voice or pronunciation switches for those parts.
Common failures
Where it breaks
- A French quotation on an English page has no lang attribute, so it is read with English pronunciation.
- A language switcher lists names such as Deutsch and Español without marking the language of each link.
- A passage is marked with the wrong or an invalid language code.