3.1.1 Language of Page
High-Level Description
This success criteria requires the default language of a webpage to be identified in its code. This helps assistive technologies, like screen readers to read the content in the correct pronunciation and language-specific way. It ensures users who rely on such tools can understand the content as intended.
Detailed Description
Applies to:
- All web pages, regardless of the type of content or purpose.
This allows:
- Screen readers to pronounce words with the correct accent.
- Browsers and tools to offer accurate spelling, grammar checks, and translations.
- Assistive technology to present content in a way that aligns with the user's expectation.
Indicators of Non-Compliance:
- The website sets the language inconsistently i.e. some pages are missing the lang attribute.
- The website is missing the lang attribute entirely.
- Text-to-speech output sounds incorrect or hard to understand due to wrong language setting.
Real World Examples
| Scenario | Incorrect / Missing Code | Correct Code |
|---|---|---|
| English homepage | < html > | < html lang="en" > Screen readers can pronounce English correctly |
| Irish-language policy page | < html lang="en" > | < html lang="ga" > |
| Multilingual website | No language set on base page | Each page uses correct lang (e.g., lang="en", lang="ga", etc.) Helps assistive technology and translation tools work correctly on all pages |
| Screen reader testing | No language set, screen reader defaults to system language | Language set explicitly, screen reader pronounces accurately. Avoids misleading or mispronunciation |
Disability Impact
| Disability Group | Without Language Tag | With Language Tag |
|---|---|---|
| Blind Users | Screen reader mispronounces or confuses words | Screen reader reads in the correct language/accent |
| Dyslexic Users | Spelling/grammar checkers show irrelevant suggestions | Tools assist appropriate based on language context |
| Users with Cognitive Disabilities | Confusion from unexpected or unclear audio output | Language-appropriate audio and assistive tool support |
Supporting Documentation
- WCAG 2.2 Success Criterion 3.1.1 - Language of Page
- HTML Spec - The lang attribute
- H57 - Using the language attribute on the HTML element
Remediation Strategies
1 - Add the lang Attribute to the HTML Element
< !-- English -- >
< html lang="en" >
< !-- Irish -- >
< html lang="ga">
2 - Match Page Language to Actual Content
Ensure the lang value reflects the dominant natural language used on the page, not just the site default.
3 - Include Language Settings in Templates
Set the lang attribute in all page templates to ensure consistent compliance across your site.