Level A Understandable WCAG 3.1.1

What This Criterion Requires

WCAG 3.1.1 requires that the default human language of each web page can be programmatically determined. This is achieved by setting the lang attribute on the html element with a valid BCP 47 language tag such as 'en' for English, 'es' for Spanish, 'fr' for French, 'ja' for Japanese, or 'de' for German. The language declaration tells screen readers and other assistive technologies which language pronunciation rules to use when reading the content aloud. Without a lang attribute, screen readers default to the user's system language, which may result in content being read with incorrect pronunciation. For example, French text read with English pronunciation rules becomes incomprehensible. This is one of the simplest WCAG criteria to satisfy -- it requires adding a single attribute to the html element -- yet the WebAIM Million study consistently finds that approximately 17-20% of home pages have no lang attribute or have an incorrect one. The lang attribute also helps translation tools, search engines, and browser spell-check features work correctly. It should match the primary language of the page content.

Why It Matters

Screen readers use text-to-speech engines that apply pronunciation rules based on the declared language. When a screen reader encounters a page without a lang attribute or with an incorrect language declared, it applies the wrong pronunciation rules, making the content difficult or impossible to understand. Imagine listening to Japanese text read with English pronunciation rules, or English text with German pronunciation -- the result is incomprehensible speech. For multilingual users, the language declaration helps their screen reader switch between voice profiles automatically. Beyond screen readers, the lang attribute affects browser auto-translation features, enabling correct translation of the page content. Spell-checking tools use the language declaration to apply the correct dictionary. Search engines use the lang attribute as one signal for serving appropriate content to users searching in specific languages. For users who rely on assistive technology to access web content, an incorrect or missing language declaration transforms otherwise accessible content into an unintelligible experience.

Common Failures and How to Fix Them

Missing lang attribute on the html element

The html element does not include a lang attribute, leaving screen readers and other tools to guess the page language. This results in incorrect pronunciation for screen reader users.

Inaccessible
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>About Our Company</title>
  </head>
  <body>
    <h1>About Our Company</h1>
  </body>
</html>
Accessible
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>About Our Company</title>
  </head>
  <body>
    <h1>About Our Company</h1>
  </body>
</html>

Incorrect language code specified

The lang attribute contains an invalid or incorrect language code, such as using a full language name instead of a BCP 47 code, or declaring the wrong language for the page content.

Inaccessible
<!-- Invalid: full language name instead of code -->
<html lang="English">

<!-- Wrong language declared for content -->
<html lang="fr">
  <!-- Page content is entirely in English -->
  <body>
    <h1>Welcome to our website</h1>
  </body>
</html>
Accessible
<!-- Correct BCP 47 language code -->
<html lang="en">
  <body>
    <h1>Welcome to our website</h1>
  </body>
</html>

<!-- For regional variants, use extended codes -->
<html lang="en-GB">
<!-- or -->
<html lang="pt-BR">

How to Test

  1. Inspect the html element in the page source and verify that a lang attribute is present with a valid BCP 47 language code that matches the primary language of the page content.
  2. Run an automated accessibility scanner (axe DevTools, WAVE, or Lighthouse) which will flag missing or invalid lang attributes.
  3. For multilingual sites, verify that each page's lang attribute matches the language of that specific page's content, not a hardcoded default.
  4. Use a screen reader to load the page and listen for correct pronunciation; incorrect pronunciation of common words indicates a missing or wrong lang attribute.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria