WCAG 2.1 · Level A · Understandable
WCAG 3.1.1 — Language of Page, explained with examples
The default human language of the page must be programmatically set via the lang attribute on <html>. Screen readers switch pronunciation, voice, and language rules based on this attribute. Without it, English assistive tech may read French content with English phonetics, making it incomprehensible.
- Number
- 3.1.1
- Level
- A
- Principle
- Understandable
- Guideline
- 3.1 Readable
Why this criterion exists
Screen readers switch pronunciation, voice, and language rules based on this attribute. Without it, English assistive tech may read French content with English phonetics, making it incomprehensible.
If you only remember one thing: the default human language of the page must be programmatically set via the lang attribute on <html>. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. Language of Page affects:
Screen reader users
Translation tools
Search engines determining target audience
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
<html> with no lang
Generic lang="en" on a multilingual site without language switches
How to test for it
Inspect <html> in any browser DevTools.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Set the document language on <html>. Mark inline language switches with span lang="..." so AT pronounces them correctly.
The problem
<!doctype html><html><head>...The fix
<!doctype html><html lang="en"><head>...
<!-- For mixed content: -->
<p>This is English. <span lang="fr">Bonjour le monde</span>.</p>Set the document language on <html>. Mark inline language switches with span lang="..." so AT pronounces them correctly.
Frequently asked questions
What happens if the lang attribute is missing or wrong?
Screen readers use the declared language to select voice, phonetic rules, and hyphenation. A French page declared as English is read with English phonetics — often incomprehensible. A page with no declaration defaults to the screen reader's own language setting, which may be correct for the default user but wrong for anyone in a different locale.
How do I handle multilingual content on one page?
Set the primary page language on <html lang="fr">. For inline content in a different language, wrap it in a <span lang="en"> or the appropriate BCP 47 language tag. You do not need to mark every foreign word — only passages long enough that pronunciation errors would impede comprehension.
Does this affect SEO as well as accessibility?
Yes. Google uses the lang attribute to determine the language of a page for search index segmentation and serve-to-country decisions. hreflang attributes build on the same language metadata. A correct lang attribute is both an accessibility requirement and a basic signal for international SEO.
Other Understandable criteria
3.3.1 Error Identification
Understandable · Level A
3.3.2 Labels or Instructions
Understandable · Level A
3.2.1 On Focus
Understandable · Level A
3.2.2 On Input
Understandable · Level A
All WCAG 2.1 criteria
Browse the full index by principle
Complete WCAG 2.1 guide
POUR principles, conformance levels, legal requirements
How to fix: missing lang attribute on <html>
Fix recipe · 3.1.1
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.