Valid Language Attribute Compliance
Rule ID: valid-lang
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549
How to Fix the Problem
To meet accessibility requirements and ensure proper screen reader behavior, follow these steps to apply valid language codes in your HTML:
-
Specify the Primary Language Correctly:
In your HTML document, declare the language of the entire page using thelang
attribute in the<html>
tag. Use ISO 639-1 two-letter language codes such as:This example sets the language to English.
-
Use Region-Specific Language Codes (Optional):
For dialects or regional variations, use extended language codes:This enhances accuracy for screen readers that rely on regional pronunciation.
-
Specify Language Changes Inline:
If parts of your document switch languages, use thelang
attribute on inline elements: -
Set Text Direction Where Applicable:
For right-to-left languages (e.g., Arabic or Hebrew), also specify thedir
attribute: -
Avoid Common Mistakes:
-
Do not use misspelled language codes (e.g.,
lang="englsh"
is invalid). -
Verify that all values conform to ISO language standards (e.g., ISO 639-1 and BCP 47).
-
-
Validation:
Use tools like the W3C Validator or accessibility testing tools (e.g., axe DevTools) to confirm your language codes are valid.
Why it Matters
Proper use of language attributes is essential for accessibility:
-
Screen Reader Accuracy: Screen readers rely on
lang
attributes to switch voice engines and pronunciation rules. Without valid language codes, content may be read incorrectly, causing confusion. -
Multilingual Support: Websites that contain multiple languages must identify each language change to ensure that multilingual users experience smooth and intelligible narration.
-
Legal and Regulatory Compliance: Valid language codes help meet accessibility standards like WCAG and EN 301 549, reducing legal risk and improving usability for people with disabilities.
Failing to specify or incorrectly specifying the document language undermines the user experience and may result in non-compliance.
Rule Description
All HTML documents must define a valid language using the lang
attribute. The value must match recognized language codes to allow screen readers to interpret and pronounce content correctly.
The Algorithm (in simple terms)
-
Check if the
<html>
element includes alang
attribute. -
Confirm that the value matches a valid language code (e.g.,
en
,fr-CA
,es
,de-DE
). -
If the attribute is missing or contains an invalid code, flag an error.