Standards · WCAG 2.2

SC 3.1.1 Level A WCAG 2.0

Language of Page

Set the default human language of every page programmatically — usually with the lang attribute on the html element. Screen readers, braille displays, and translation tools use this to choose pronunciation rules, voice profiles, and character mappings.

What it asks

Every web page must declare its default human language in a way assistive technology can read. In HTML, that means a valid lang attribute on the root <html> element, set to a primary language subtag from BCP 47 (en, de, bg, zh-Hans). The value must reflect the actual default language of the textual content — not the language of the CMS, not the country of the host.

A page that mixes languages still has one default; secondary languages are handled by 3.1.2 Language of Parts.

How to meet it

  • Add lang to the <html> element of every page: <html lang="en">.
  • Use the correct BCP 47 subtag. Use en for generic English; use en-GB or en-US only if regional pronunciation matters.
  • For Chinese, distinguish script: zh-Hans (Simplified), zh-Hant (Traditional).
  • For right-to-left languages (Arabic, Hebrew, Persian), pair lang with dir="rtl".
  • In React/Next.js/Astro, set the attribute in the root layout template, not in _document body, so every route inherits it.
  • In multi-language sites, switch lang per route — never serve one global default to localized pages.

Common failures

  • Missing lang entirely — the most common failure on legacy and CMS-templated sites.
  • lang="" (empty value) or lang="english" — invalid; only BCP 47 subtags are conforming.
  • All pages hardcoded to lang="en" even when content is German, French, or Bulgarian.
  • A French page with lang="en" because the CMS template ships with English as default and nobody changed it.
  • lang set on <body> instead of <html> — accepted in some tools but not the canonical location.

Why it matters

Screen readers use lang to choose the right voice synthesizer. With the wrong language declared, an English screen reader reads German text phonetically — “Schmetterling” comes out as nonsense syllables. Braille displays use it to pick the correct grade-2 contraction tables. Browser translation features use it to detect what to translate from. Search engines use it for ranking and snippet generation.

This is a 30-second fix that unlocks comprehension for every screen-reader user on the page, and yet it’s missing on a significant fraction of production sites. It is one of the most-cited issues in automated audits because it’s binary and easy to detect.