- Success Criterion 3.1.2
- Conformance level AA
Language Attribute Applied to the Wrong Element Entirely
3.1.2 — Language of Parts
Scenario
Setting
A hotel booking site's room-selection page
What’s wrong
lang applied but to the wrong scope (marks the English wrapper, not the foreign phrase).
Example
<p lang="fr" class="room-description">
This deluxe room includes a <em>terrasse privee</em> with ocean views.
</p>Why it matters
The lang attribute sits on the whole English sentence instead of just the French phrase, so the screen reader speaks the entire description, English words included, with French pronunciation.
How to test
Inspect the lang attribute's scope in DevTools: if it's applied to a wrapping English element instead of the actual foreign-language phrase inside it, it fails.
How to fix
Scope lang to exactly the phrase that changes language, not the surrounding sentence it sits inside.
<p class="room-description">
This deluxe room includes a <em lang="fr">terrasse privee</em> with ocean views.
</p>Outcome
A traveler comparing rooms hears the description in clear English with only the French term switching accent.
Who is affected
Screen reader users reading room descriptions get the opposite problem from missing lang: the English portion now sounds foreign and hard to parse.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- No Way to Programmatically Tell Which Language a Passage Uses
- Foreign-Language Quote or Phrase With No Language Attribute
- Language Switcher Link With No Language Tag of Its Own
- Mixed-Language Legal or Product Text Left Entirely Unmarked
- Language Attribute Copy-Pasted Onto the Wrong Piece of Text
- Bilingual Layout Where One Column’s Language Goes Unmarked