Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit valid-lang

Ensure lang attributes have valid values

Impact:

Serious

WCAG-Konformität:

AA
WCAG 3.1.2

Issue type:

failure

Element with lang attribute has valid language tag

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.

Applicability

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:

descendant: the element is an inclusive descendant in the flat tree of a body element; and
content type: the element has an associated node document with a content type of text/html; and
text: there is some text inheriting its programmatic language from the element which is neither empty nor only whitespace.

Expectation

For each test target, the lang attribute value has a known primary language tag.

Background

Assumptions

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.

Accessibility Support

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.

Bibliography

Test Cases

Passed

Passed Example 1

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>

Passed Example 2

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>

Passed Example 3

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>

Passed Example 4

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>

Passed Example 5

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>

Failed

Failed Example 1

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>

Failed Example 2

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>

Failed Example 3

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>

Failed Example 4

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>

Failed Example 5

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>

Failed Example 6

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>

Failed Example 7

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>

Failed Example 8

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>

Failed Example 9

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>

Inapplicable

Inapplicable Example 1

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>

Inapplicable Example 2

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>

Inapplicable Example 3

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>

Inapplicable Example 4

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>

Inapplicable Example 5

The text inheriting its programmatic language from this div element is only whitespace.

<html lang="en">
	<body>
		<div lang="invalid"></div>
	</body>
</html>

Autoren: Bryn Anderson, Jey Nandakumar

Finanzierung: WAI-Tools