3.1.1 Language of Page

WCAG 2.2 · 3.1.1 A Understandable

What it requires

The default human language of each web page must be set in code so that browsers and assistive technology can determine it programmatically. In HTML this means a valid lang attribute on the <html> element — for example lang="en" for English or lang="he" for Hebrew. The value must be a valid BCP 47 language tag and must match the language of the page's main content. This criterion covers only the page default; passages in a different language are handled by 3.1.2 Language of Parts (Level AA).

  • Screen reader users — the correct language switches the synthesizer's voice and pronunciation rules; a wrong or missing value renders text in the wrong accent, often unintelligibly.
  • People using braille displays — language drives correct braille translation, including contracted braille.
  • People who rely on automatic translation or text-to-speech in the browser, which need an accurate language to start from.
  • All users indirectly, via correct font selection, hyphenation, and quotation rendering.

How to detect it

Concrete checks for Language of Page
Check How Catches a failure when…
Inspect the source View the <html> element in DevTools or page source. The lang attribute is missing, empty, or invalid.
Verify the value Confirm the tag is a real BCP 47 code and matches the visible content. Page is in French but declares lang="en".
Screen reader Read the page with NVDA, JAWS, or VoiceOver. The voice reads text with the wrong accent or pronunciation.
Automated tools Run axe, WAVE, or Lighthouse. Reliably flags missing/empty/invalid lang; cannot judge whether a valid value matches the actual content — that needs a human.

How to fix it

  1. Add a lang attribute to the root <html> element.
  2. Use a valid BCP 47 tag — the primary subtag is enough (en, fr, he); add a region only when needed (en-GB, pt-BR).
  3. Make sure the value matches the language of the page's primary content.
  4. Set dir="rtl" as well for right-to-left languages such as Hebrew or Arabic.
  5. If a template generates pages in several languages, drive the attribute from the page's actual language, not a hard-coded default.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Accessible page</title>
  </head>
</html>

Copy-paste tests

Automated coverage

These axe-core rules flag failures of this criterion: html-has-lang, html-lang-valid, and html-xml-lang-mismatch. Run them via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures, so manual review is still required.

Run this in the browser console

check-page-lang.js 
// Read-only: surfaces the page-level lang for review.
const html = document.documentElement;
const lang = html.getAttribute('lang');
const xmlLang = html.getAttribute('xml:lang');
console.table([{ lang, 'xml:lang': xmlLang, present: lang !== null }]);
if (!lang) {
  console.warn('No lang attribute on <html>.');
  html.style.outline = '3px solid red';
}
console.log('Document title:', document.title);

What to check manually: confirm the declared lang value actually matches the human language of the visible content, and that it is a valid BCP 47 tag (e.g. en, not english). No script can judge the real prose language.