Ensure lang attributes have valid values
This rule checks that a non-empty `lang` attribute of an element in the page has a language tag with a known primary language subtag.
Autoren: Bryn Anderson, Jey Nandakumar
Finanzierung: WAI-Tools
This rule applies to any HTML element with a lang attribute value that is not empty ("") and for which all of the following is true:
body element; andtext/html; andFor each test target, the lang attribute value has a known primary language tag.
This rule assumes that the lang attribute value is used to indicate the language of a section of the content. If the lang attribute value is used for something else (for example to indicate the programming language of a code element), the content may still conform to WCAG despite failing this rule.
This rule assumes that user agents and assistive technologies can programmatically determine known primary language tags even if these do not conform to the RFC 5646 syntax.
This rule assumes that only known primary language tags are enough to satisfy Success Criterion 3.1.2 Language of Parts; 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.
There are differences in how assistive technologies handle unknown and invalid language tags. Some will default to the language of the page, whereas others will default to the closest ancestor with a valid lang attribute.
This article element has a lang attribute value which has a known primary language tag.
<html lang="es">
<body>
<article lang="en">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>
This blockquote element has a lang attribute value which has a known primary language tag. The region section ("CH") in the value is ignored by the rule (and the definition of known primary language tag).
<html lang="en">
<body>
<blockquote lang="fr-CH">
Ils ont trouvé un étrange bar Tiki aux abords de la petite ville balnéaire.
</blockquote>
</body>
</html>
This p element has a lang attribute value which has a known primary language tag, but a syntactically invalid region subtag which is ignored by the rule.
<html lang="fr">
<body>
<p lang="en-US-GB">
They wandered into a strange Tiki bar on the edge of the small beach town.
</p>
</body>
</html>
This div element has a valid lang attribute value. There is no text inheriting its programmatic language from the article element, therefore its lang attribute is not considered by the rule.
<html lang="fr">
<body>
<article lang="invalid">
<div lang="en">
They wandered into a strange Tiki bar on the edge of the small beach town.
</div>
</article>
</body>
</html>
This div element has a valid lang attribute value. The accessible name of the image is text inheriting its programmatic language from the div element.
<html lang="es">
<body>
<div lang="EN">
<img src="/test-assets/shared/fireworks.jpg" alt="Fireworks over Paris" />
</div>
</body>
</html>
This article element has a lang attribute value which does not have a known primary language tag because its primary language subtag does not exist in the language subtag registry.
<html lang="es">
<body>
<article lang="dutch">
Zij liepen een vreemde Tiki bar binnen, aan de rand van een dorpje aan het strand.
</article>
</body>
</html>
This article element has a lang attribute value which has no known primary language tag.
<html lang="en">
<body>
<article lang="#!">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>
This article element has a lang attribute value which consists of only whitespace and thus has no known primary language tag.
<html lang="fr">
<body>
<article lang=" ">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>
The lang attribute value does not have a valid language tag. Even though the p element is not included in the accessibility tree due to the presence of the aria-hidden="true" attribute, it is visible; therefore its content is text inheriting its programmatic language from the article element. Hence, the lang attribute must be valid.
<html lang="es">
<body>
<article lang="english">
<p aria-hidden="true">
They wandered into a strange Tiki bar on the edge of the small beach town.
</p>
</article>
</body>
</html>
The lang attribute value does not have a valid language tag. Even though the p element is not visible due to it being moved off-screen, it is included in the accessibility tree; therefore its content is text inheriting its programmatic language from the article element. Hence, the lang attribute must be valid.
<html lang="fr">
<body>
<article lang="English">
<p style="position: absolute; top: -9999px">
They wandered into a strange Tiki bar on the edge of the small beach town.
</p>
</article>
</body>
</html>
This div element has an invalid lang attribute value. There is no text inheriting its programmatic language from the article element, therefore its lang attribute is not considered by the rule.
<html lang="es">
<body>
<article lang="en">
<div lang="invalid">
They wandered into a strange Tiki bar on the edge of the small beach town.
</div>
</article>
</body>
</html>
This div element has an invalid lang attribute value. The accessible name of the image is text inheriting its programmatic language from the div element.
<html lang="en">
<body>
<div lang="invalid">
<img src="/test-assets/shared/fireworks.jpg" alt="Fireworks over Paris" />
</div>
</body>
</html>
The lang attribute value of this p element is an iso 639.2 three letters code, which has no known primary language tag.
<html lang="en">
<body>
<p lang="eng">I love ACT rules!</p>
</body>
</html>
The lang attribute value of this p element is a grandfathered tag, which has no known primary language tag.
<html lang="lb">
<body>
<p lang="i-lux">Lëtzebuerg ass e Land an Europa.</p>
</body>
</html>
There is no element with a lang attribute value which is a descendant of a body element.
<html lang="en">
<body>
They wandered into a strange Tiki bar on the edge of the small beach town.
</body>
</html>
There is no element which is a descendant of a body element and has a non-empty lang attribute value.
<html lang="en">
<body>
<article lang="">
They wandered into a strange Tiki bar on the edge of the small beach town.
</article>
</body>
</html>
There is no element with a text node as a descendant in the flat tree that is either visible or included in the accessibility tree.
<html lang="en">
<body>
<p lang="hidden">
<span style="display: none;">
They wandered into a strange Tiki bar on the edge of the small beach town.
</span>
</p>
</body>
</html>
There is no text inheriting its programmatic language from this div element.
<html lang="en">
<body>
<div lang="invalid">
<img src="/test-assets/shared/fireworks.jpg" alt="" />
</div>
</body>
</html>
The text inheriting its programmatic language from this div element is only whitespace.
<html lang="en">
<body>
<div lang="invalid"></div>
</body>
</html>