Missing Lang Attribute: Error Explained and Fixed
Also called: HTML element has no lang attribute, Page language not set, Missing document language
Definition
A missing lang attribute means the html element of a page has no lang attribute, or an empty or invalid one. Browsers and screen readers then cannot tell which language the page is written in.
A missing lang attribute is the scanner error for a page whose <html> element does not declare the page language. Tools report it as "HTML element has no lang attribute" or "Page language not set". The fix is one attribute – but without it, a screen reader may read your whole page with the wrong pronunciation rules.
What it means
WCAG 3.1.1 Language of Page is a Level A criterion of WCAG 2.2. It requires that the default human language of each web page can be programmatically determined. In HTML, that is the job of the lang attribute on the html element (W3C technique H57).
Why it matters: screen readers and text-to-speech load pronunciation rules for the declared language. If the page language is not set, the software falls back to the user's default voice. A German page read by an English voice is hard to follow – and the reverse is just as bad. Browsers also use the language to render characters correctly and for automatic translation, and media players use it to display captions.
W3C names these groups as the main beneficiaries:
| Who | What the lang attribute does for them |
|---|---|
| Screen reader and text-to-speech users | Correct pronunciation and voice |
| People who find reading written text hard | Text-to-speech reads words correctly |
| People with cognitive, language or learning disabilities | Reliable read-aloud support |
| People who rely on captions | Captions displayed correctly |
Scanners also flag the attribute when it is present but empty (lang="") or not a valid language tag. The value has to follow BCP 47 – the familiar short codes such as en, de or en-GB.
Examples
<!-- Missing lang attribute: language unknown -->
<!DOCTYPE html>
<html>
<head><title>Opening hours</title></head>
<!-- Fixed: English page -->
<html lang="en">
<!-- Fixed: British English with a region subtag -->
<html lang="en-GB">
<!-- A French quote inside the English page (3.1.2) -->
<p>Our motto: <span lang="fr">savoir-faire</span></p>Set lang on the html element of every page, use the language most of the content is written in, and give each language version of a multilingual site its own code.
Leave lang empty, invent codes such as lang="english", or copy the same lang="en" into a translated template where the content is now in German.
How to fix a missing lang attribute
The lang attribute is a quick win for any audit against the European Accessibility Act, because the same missing setting usually affects every page of a site. While you are in the template, check other site-wide issues such as an empty button in the header or a skipped heading level in the footer.
Questions
What does "HTML element has no lang attribute" mean?
The <html> tag of the page does not state which language the content is in. Assistive technology then guesses or uses its default language, which often leads to wrong pronunciation.
Is a missing lang attribute a WCAG failure?
Yes. It fails 3.1.1 Language of Page, a Level A criterion, because the page language cannot be programmatically determined. Level A is the minimum level of WCAG conformance.
Should I use "en" or "en-US"?
Both are valid. The primary code (en) meets WCAG. A region subtag such as en-US or en-GB adds detail some voices and spellcheckers can use, but it is optional.
Does every page need its own lang attribute?
Yes. The criterion applies to each web page, so every page has to declare its default language. In practice you set it once in the shared template, and each language version of the template outputs its own code.
How do I check every page for a missing lang attribute?
Templates usually cause the error site-wide, so testing one page per template and language is a good start. The free WCAG scanner shows it on the first scan, together with other Level A issues.
Related terms
Missing Alt Attribute: Error Explained and Fixed
A missing alt attribute means an img element (or an image button or image map area) has no alt attribute at all. Assistive technology cannot tell whether the image is informative or decorative and may read out the file name instead.
Read definition: Missing Alt Attribute: Error Explained and FixedEmpty Button: What the Error Means and How to Fix It
An empty button is a button element with no accessible name – no text, no aria-label and no alt text on an image inside it. Screen readers announce only that it is a button, not what it does.
Read definition: Empty Button: What the Error Means and How to Fix ItSkipped Heading Level: Warning Explained and Fixed
A skipped heading level is a jump of more than one rank down the heading hierarchy, for example from h2 straight to h4. Screen reader users who navigate by headings may think a section is missing.
Read definition: Skipped Heading Level: Warning Explained and Fixed