Accessibility
a11y/html-lang
The html element names the language of the page in a non-empty lang attribute.
seriousstaticWCAG 3.1.1 · Afe-html
Why
Screen readers choose their pronunciation from lang; without it the text is read with the user's default voice and can be unintelligible. Browsers also use it for hyphenation, translation and font selection.
Fix
Put a BCP 47 language tag on the root element: <html lang="en">, <html lang="pl">. In Next.js set it in the root layout, in Astro in the layout, in SvelteKit in src/app.html. Mark passages in another language with their own lang.
Examples
<!-- bad -->
<html>
<!-- good -->
<html lang="en">Sources
Facts
- Id
a11y/html-lang- Severity
- serious
- Check
- static checked in the source by
audit - Applies to
htmlastrojsxsvelte- WCAG 2.2
- 3.1.1, level A
- Same problem in
- axe-core
html-has-lang, axe-corehtml-lang-valid - Taught by the skill
fe-htmlHTML documents and semantics- Since version
- 0.1.0
Read it in the terminal
npx github:dawidolko/frontend-skills explain a11y/html-lang