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.
Other Understandable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.