Ensuring HTML Documents Have a Language Attribute
Rule ID: html-has-lang
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
How to Fix the Problem
To comply with accessibility guidelines and improve usability for screen reader users, ensure that the <html>
element of your document includes a lang
attribute specifying the primary language of the content.
Basic Implementation
Add the lang
attribute to the opening <html>
tag. For example, if the primary language is English:
Specify Regional Dialects
For more precision, include regional codes:
-
American English:
<html lang="en-US">
-
Canadian French:
<html lang="fr-CA">
You can find a full list of standardized language and dialect codes online (e.g., ISO 639-1 and ISO 3166-1 alpha-2).
Handling Multilingual Content
When a document contains text in multiple languages, use the lang
attribute on specific elements:
Text Direction for Right-to-Left (RTL) Languages
For languages written right-to-left, like Arabic or Hebrew, use the dir
attribute:
For left-to-right languages (most languages), you may optionally specify:
Why it Matters
When screen reader users browse the web, they rely on the lang
attribute to ensure correct pronunciation and intonation. If this attribute is missing, screen readers default to the user’s preset language, which can lead to incorrect pronunciation, confusion, and misunderstanding—particularly for multilingual users.
Screen readers use specific language libraries to pronounce words accurately. Without a specified language, the wrong library may be used, leading to unintelligible output (e.g., a Spanish sentence read with an English voice).
Correct use of the lang
attribute helps:
-
Accurately pronounce content
-
Enhance comprehension for multilingual users
-
Support proper switching between languages mid-document
Rule Description
Every HTML document must include a valid lang
attribute in the <html>
element. The value must be a valid language code representing the document’s primary language. This enables assistive technologies, especially screen readers, to render content correctly for users who prefer languages other than the browser or system default.
The Algorithm (in simple terms)
The accessibility engine checks:
-
Whether the
<html>
element exists. -
If it includes a
lang
attribute. -
Whether the attribute contains a valid language code.
If the lang
attribute is missing or contains an invalid code, the rule fails.