| name | apply-page-language |
| description | Use when building any web page or SPA — to declare the language of the page and any inline content in a different language, so screen readers select the correct text-to-speech voice and language rules. |
| source | W3C WCAG 2.1 SC 3.1.1 Language of Page (Level A), SC 3.1.2 Language of Parts (Level AA); IETF BCP 47 language tag specification; MDN HTML lang attribute guide |
| tags | ["accessibility","wcag","a11y","language","lang-attribute","screen-reader","internationalization","developer"] |
| related | ["write-semantic-html-structure","design-accessibility-standards"] |
Set Page Language
Declare the page language on <html lang> and mark inline content in a different language —
so screen readers use the correct pronunciation, TTS voice, and hyphenation rules.
Why This Is Best Practice
Adopted by: WCAG 2.1 SC 3.1.1 (Level A, required universally) and SC 3.1.2 (Level AA, required
by Section 508 US, EU EN 301 549, UK PSBAR 2018). The HTML Living Standard and every major framework
(Next.js, Nuxt, SvelteKit, Angular) provide built-in mechanisms for setting lang as a baseline
HTML requirement. Google Lighthouse, axe-core, and WAVE all flag missing lang as a critical error.
Impact: Screen readers switch TTS voice engines based on the attribute — reading French
text with an English voice produces unintelligible output. NVDA, JAWS, and VoiceOver all implement
automatic language switching per the attribute. WebAIM's 2024 screen reader survey found 68%
of screen reader users rely on automatic language switching. Without , browsers also fail to
apply correct spell-check, hyphenation, and quotation mark rules for language-specific characters.
The HTTP header and cannot
substitute — screen readers do not use these for TTS voice selection. The attribute on HTML
elements is the only mechanism supported across all screen readers and browsers for per-element
language switching.
