html-has-lang high
<html> element must have a lang attribute
The root <html> tag has no lang attribute, so screen readers fall back to a guess and read the page with the wrong pronunciation engine.
What you see
<html> element must have a lang attribute The <html> element does not have a lang attribute Element: <html>
What’s actually happening
There's no lang on the <html> element. When a screen reader loads the page it has nothing to tell it which pronunciation rules and voice to use, so it falls back to the user's default synth language. English content read by a French voice profile, or the reverse, comes out as gibberish — wrong phonemes, wrong stress, sometimes the wrong voice entirely. It also breaks per-language features downstream: hyphenation, quote marks, and translate-tool detection all key off the document language.
Common causes
- A hand-built or minimal HTML template never included lang on the opening <html> tag
- A CMS or static-site generator outputs <html> without a configured site language, or a theme dropped the attribute during a redesign
- A JavaScript framework renders <html> from a template that omits lang, and it never gets set client-side
- The attribute is present but empty (lang="") or set to a bogus value like lang="english" instead of a valid BCP 47 code
- The page is generated by concatenating fragments and the document-shell fragment that holds <html> was missing the attribute
How to fix it
- Add a valid BCP 47 code to <html>Set the primary language on the root tag: <html lang="en">. Use a real BCP 47 subtag — en, fr, de, es, ja — not a word like "english". This one attribute resolves the rule and fixes pronunciation for the whole document.
- Use a region subtag only when it mattersAdd a region when pronunciation or formatting differs meaningfully, e.g. lang="en-US" vs lang="en-GB", or lang="pt-BR" vs lang="pt-PT". For most sites the bare language subtag (lang="en") is enough; don't invent region codes you don't need.
- Set it at the template/framework sourceFix it where <html> is actually emitted: the base layout in your SSG/CMS theme, the document shell (e.g. the lang prop in a meta-framework's root document), or the master template. Setting it once at the source covers every page rather than patching individual routes.
- Mark inline language changes with lang on the elementWhen a passage switches language (a quote, a phrase, a code term), put lang on that element — <span lang="fr">…</span> or <blockquote lang="de">…</blockquote> — so the screen reader switches voices for just that run while the document default handles the rest.
- For right-to-left languages, also set dirLanguages like Arabic and Hebrew need direction too: <html lang="ar" dir="rtl">. lang controls pronunciation; dir controls layout order. Set both for correct rendering.
Stop it recurring
Put lang on <html> in the base template once, so every generated page inherits it automatically.
Related errors