This rule applies to any [HTML element][] with a lang attribute for which all the following are true:
in body: the element is an [inclusive descendant][] in the [flat tree][] of a body element; and
HTML: the element is in a [document][] with a [content type][] of text/html; and
Valid language: the element's lang [attribute value][] has a [known primary language tag][]; and
Not empty: there is some non-empty [text inheriting its programmatic language][] from the element which is neither empty nor only [whitespace][].
Expectation
For each test target, the [primary language][] of its lang [attribute value][] is a [most common language][] of the test target.
Assumptions
This rule assumes that user agents and assistive technologies can programmatically determine [known primary language tags][known primary language tag] even on [language tags][rfc 5646] that do not conform to the [RFC 5646][] syntax.
This rule assumes that only [language tags][rfc 5646] with a [known primary language tag][] are enough to satisfy [Success Criterion 3.1.2 Language of Parts][sc312]; this notably excludes [grandfathered tags][] and [ISO 639.2][] three-letters codes, both having poor support in assistive technologies.
This rule assumes that the text nodes contain text that express something in [human language][] and therefore need a correct programmatic language.
Accessibility Support
There are no accessibility support issues known.
Background
This rule checks that, if a lang attribute is used, its value is correct with respect to the content. This rule does not check whether a lang attribute should have been used or not. Especially, this rule does not check when lang attributes are missing. This must be tested separately and it is therefore possible to pass this rule without satisfying Success Criterion 3.1.2 Language of Parts.
In all examples, the html element has itself a lang attribute in order to make sure that the examples satisfy Success Criterion 3.1.1 Language of Page. These html elements are, however, never applicable because they are not descendants of a body element, and the example descriptions do not mention them further.
Test Cases
Passed
Passed Example 1
This span element has a lang [attribute value][] of nl (Dutch), which matches its [most common language][]. The most common language is Dutch because all words are Dutch.
<html lang="en">
<head>
<title>Dutch idioms</title>
</head>
<body>
<p>
The Dutch phrase <span lang="nl">"Hij ging met de kippen op stok"</span> literally translates into "He went to
roost with the chickens", but it means that he went to bed early.
</p>
</body>
</html>
Passed Example 2
The second p element has lang attribute value of nl (Dutch), which matches its [most common language][]. The most common language is Dutch because all English words are in span elements with a lang attribute value of en. Both span elements also have a lang attribute matching their most common language.
<html lang="en">
<head>
<title>Dutch idioms</title>
</head>
<body>
<p>Dutch idioms and their English meaning.</p>
<p lang="nl">
<span lang="en">The Dutch phrase</span> "Hij ging met de kippen op stok"
<span lang="en"
>literally translates into "He went to roost with the chickens", but it means that he went to bed early.</span
>
</p>
</body>
</html>
Passed Example 3
This div element has a lang [attribute value][] of en (English), which matches its [most common language][]. The most common language is English because the accessible texts are English, and all other text is in a p element with a (correct) lang attribute value of fr.
This span element has a lang [attribute value][] of fr (French), which matches one of its [most common languages][most common language]. The most common languages are both English and French because all the words belong to both languages.
<html lang="en">
<p>
Even though all its words are English and it has meaning in English, the sentence
<span lang="fr">Paul put dire comment on tape</span> is also a French sentence.
</p>
</html>
Passed Example 5
This span element has a lang [attribute value][] of en (English), which matches one of its [most common languages][most common language]. The most common languages are both English and French because all the words belong to both languages.
<html lang="fr">
<p>
Bien que tous les ses mots soient français et qu'elle ait un sens en français, la phrase
<span lang="en">Paul put dire comment on tape</span> est aussi une phrase anglaise.
</p>
</html>
Failed
Failed Example 1
This span element has lang attribute value of fr (French), which does not match its [most common language][]. The most common language is Dutch because all words are Dutch.
<html lang="en">
<head>
<title>Dutch idioms</title>
</head>
<body>
<p>
The Dutch phrase <span lang="fr">"Hij ging met de kippen op stok"</span> literally translates into "He went to
roost with the chickens", but it means that he went to bed early.
</p>
</body>
</html>
Failed Example 2
The second p element has lang attribute value of en (English), which does not match its [most common language][]. The most common language is Dutch because all English words are in span elements with a lang attribute value of fr. Both span elements also have an incorrect lang attribute in order to make sure that all targets in this example fail the rule.
<html lang="nl">
<head>
<title>Met de kippen op stok</title>
</head>
<body>
<blockquote>
<p>"Hij ging met de kippen op stok"</p>
</blockquote>
<p lang="en">
<span lang="fr">The Dutch phrase</span> "Hij ging met de kippen op stok"
<span lang="fr"
>literally translates into "He went to roost with the chickens", but it means that he went to bed early.</span
>
</p>
</body>
</html>
Failed Example 3
This div element has a lang attribute value of fr (French), which does not match its [most common language][]. The most common language is English because the accessible texts are English, and all other text is in a p element with a lang attribute value of nl, which also doesn't match its common language.
This div element has a lang attribute value of fr (French), which does not match its [most common language][]. The most common language is English because the accessible name of the img element is English. The lang attribute on the p element is effectively ignored. The p element is not applicable because there is no [text inheriting its programmatic language][] from it since its content is neither [visible][] nor [included in the accessibility tree][].
<html lang="fr">
<head>
<title>Feu d'artifice du nouvel an</title>
</head>
<body>
<div lang="fr">
<img src="/test-assets/shared/fireworks.jpg" aria-labelledby="caption" />
<p lang="en" id="caption" hidden>
Fireworks over Paris
</p>
</div>
</body>
</html>
