3.1.2 Language of Parts (AA)
What WCAG says:
“The human language of each passage or phrase in the content can be programmatically determined” (with exceptions)
Understanding 3.1.2 Language of Parts
What this means
Written content that’s in a language different from the primary language on the page must be identified using HTML’s lang
attribute, with the exception of names, technical terms, and loan words.
Why it matters
Identifying the language of the content allows text-to-speech software, like screen readers, to switch to the appropriate pronunciation for that language.
How to check
Using your browser’s developer tools, check that any areas with content in a language different to the rest of the page have a lang
attribute with the correct value.
The language value must be valid. Some examples of valid language values are:
cy
– Welshen
– Englishen-GB
– British Englishen-US
– American Englishuk-Cyrl
– Ukrainian written in Cyrillic scriptuk-Latn
– Ukrainian written in Latin scripten-Brai-GB
– British English in Braille script
How to test in detail for 3.1.2 Language of Parts
Good example
Text marked up in a different language
<html lang="en">
<body>
<p>The audience had been invaded by <span lang="fr">agents provocateurs</span>.</p>
</body>
</html>
This passes because the phrase ‘agents provocateurs’ has been marked up correctly. This phrase is pronounced differently in French to how it would be said in English, so specifying the language of origin helps screen readers pronounce it correctly.
Common mistakes
Text in another language not marked up
<html lang="en">
<body>
<p>They've started a tête-à-tête with one another.</p>
</body>
</html>
This fails as the French phrase ‘tête-à-tête’ is not marked up with the appropriate lang
attribute.
Loan words marked up unnecessarily
<html lang="en">
<body>
<p>I bought an <span lang="it">espresso</span> at the <span lang="fr">café</span> earlier.</p>
</body>
</html>
This is unnecessary as ‘espresso’ and ‘café’ are both loan words in English, so they do not need to be marked up separately.
Invalid language value
<html lang="en">
<body>
<p>Locke argued that the human mind starts as a <span lang="Latin">tabula rasa</span>, a blank slate.</p>
</body>
</html>
This fails as the lang
attribute’s value is not valid.
Related success criteria
3.1.1 Language of Page (A) covers the language of the entire page being marked up correctly.