Why screen readers need the page language
Without a lang attribute, screen readers guess the language and mispronounce everything. One attribute on the html element fixes it.
Step by step, with screenshots: Testing your site with a screen reader in 20 minutes →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
The page language is declared with the lang attribute on the <html> element, for example <html lang="en"> for English or <html lang="hr"> for Croatian. It tells browsers, screen readers and translation tools which language the content is written in.
Screen readers choose their voice and pronunciation rules from it; without it they use the listener's default language, so a Croatian page read with English rules becomes impossible to follow. Browsers also use it for hyphenation, spell checking and offering translation. WCAG 2.2 success criterion 3.1.1 (Language of Page, level A) requires it. getReport checks the rendered <html> element. It is OK when lang holds a valid code that matches the content.
What a passing site looks like
- The page declares its languagewarning · −1 ptseffort S
The page does not declare its language
Why it matters. Screen readers pick their pronunciation rules from the lang attribute on <html>. Without it, Croatian text may be read with English rules and become impossible to follow.
- Add lang to the html element, for example <html lang="hr"> or <html lang="en-GB">.
- In WordPress the theme prints it from Settings → General → Site Language.
Questions people ask
What values can the html lang attribute take?
It takes a BCP 47 language tag: a two- or three-letter language code such as en, de or hr, optionally followed by a region, as in en-GB, en-US or pt-BR. Add the region only when it matters for the content. Codes are not case-sensitive, but a lowercase language and an uppercase region is the convention. An invalid value counts as no language.
How do I set the lang attribute in WordPress?
WordPress sets it from Settings, General, Site Language, through the language_attributes() function in the theme's header. If your page shows the wrong language or none, choose the right Site Language and check that the theme's header.php prints language_attributes() inside the <html> tag. Multilingual plugins such as WPML and Polylang set it for each language.
What does "html element must have a lang attribute" mean?
It is an axe-core and Lighthouse accessibility finding: the <html> element has no lang attribute, or an empty one, so screen readers have to guess the language. Add lang with the correct code to the opening <html> tag in your template. For a passage in another language inside the page, add lang to that element too, such as <span lang="fr">.