What This Rule Checks
The lang attribute in the <html> element is essential for defining the language of the page’s content. This helps assistive technologies, such as screen readers, pronounce text correctly for users who are blind or visually impaired.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
The lang attribute tells screen readers which language pronunciation rules to use. Without it, a French-language page would be read with English phonetics, making it incomprehensible. This violates WCAG 3.1.1 (Language of Page).
How to Fix
Add a lang attribute to the <html> element with the correct language code (e.g., lang=”en” for English).
For RTL (Right to Left) languages such as Arabic or Hebrew, add dir=”rtl” to the <html> element to ensure the text is displayed from right to left.
For multilingual pages or mixed content, use the lang and dir attributes at the element level (e.g., <p lang=”fr” dir=”ltr”>) to specify different languages and directions within the page.
Code Examples
<!-- Missing lang attribute -->
<html>
<head>
<title>My Site</title>
</head>
<body>
...
</body>
</html>
Copy
<!-- Correct lang attribute -->
<html lang="en">
<head>
<title>My Site</title>
</head>
<body>
...
</body>
</html>
Copy
<!-- For other languages -->
<html lang="fr">
<!-- French -->
</html>
<html lang="es">
<!-- Spanish -->
</html>
<html lang="zh-Hans">
<!-- Simplified Chinese -->
</html>
Copy
Common Mistakes to Avoid
- Omitting the lang attribute entirely from the <html> element.
- Setting lang on the <body> instead of <html> (must be on <html>).
- Using an invalid language code (see html-lang-valid rule).
- Hardcoding “en” on sites that serve content in other languages.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Page-level metadata and settings affect the entire browsing experience. Language declarations, viewport settings, and page titles are foundational to accessibility and affect every user on every page load.
Related WCAG Criteria
- 3.1.1: Language of Page