Level A
Understandable
WCAG 2.0+
Success Criterion 3.1.1: Language of Page
Official W3C Definition
The default human language of each Web page can be programmatically determined.
Why This Criterion Matters
Screen readers and other assistive technologies use the page's language setting to determine how to pronounce text. Without this information, a screen reader might mispronounce content or use the wrong voice synthesis rules, making content difficult or impossible to understand.
Example: If a French page doesn't specify
lang="fr", a screen reader might try to read French text with English pronunciation rules, making it incomprehensible.
Who Benefits
Screen Reader Users
Correct pronunciation and voice synthesis.
Translation Tools
Helps automatic translation services work correctly.
Search Engines
Better indexing and language-specific search results.
Spell Checkers
Use correct dictionary for language.
How to Meet This Criterion
Technique: Add lang Attribute to HTML Element
Good Examples
<!-- English page -->
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>
<!-- French page -->
<html lang="fr">
<!-- Spanish page -->
<html lang="es">
<!-- Japanese page -->
<html lang="ja">
<!-- Chinese (Simplified) page -->
<html lang="zh-Hans">
<!-- American English specifically -->
<html lang="en-US">
<!-- British English specifically -->
<html lang="en-GB">Common Language Codes
| Language | Code | Regional Variants |
|---|---|---|
| English | en | en-US, en-GB, en-AU |
| Spanish | es | es-ES, es-MX, es-AR |
| French | fr | fr-FR, fr-CA |
| German | de | de-DE, de-AT, de-CH |
| Chinese | zh | zh-Hans (Simplified), zh-Hant (Traditional) |
| Japanese | ja | - |
| Korean | ko | - |
| Portuguese | pt | pt-BR, pt-PT |
| Arabic | ar | ar-SA, ar-EG |
Bad Examples
<!-- Bad: Missing lang attribute -->
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<!-- Bad: Wrong language code -->
<html lang="english"> <!-- Should be "en" -->
<!-- Bad: Invalid language code -->
<html lang="xyz">
<!-- Bad: lang on body instead of html -->
<html>
<body lang="en">...</body>
</html>Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Missing lang attribute | Assistive tech guesses language, often wrong | Add lang attribute to html element |
| Invalid language code | Code not recognized | Use valid ISO 639-1 codes |
| Wrong language specified | Mispronunciation of content | Match lang to actual page language |
| lang on body instead of html | May not be recognized by all assistive tech | Put lang on html element |
Testing Methods
Manual Testing Steps
- View page source: Check for lang attribute on html element
- Verify code: Is it a valid ISO language code?
- Verify accuracy: Does it match the primary language of content?
- Screen reader test: Does content sound correct?
Automated Tools
- WAVE flags missing lang attribute
- axe DevTools checks for valid language
- Lighthouse accessibility audit
- Browser DevTools: Inspect html element
Related Criteria
1.3.1 Info and Relationships
Semantic structure must be programmatically determinable