# <html> element must have a valid value for the lang attribute

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/html-lang-valid
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Screen readers rely on language-specific sound libraries to pronounce text accurately. Each language has its own pronunciation rules, intonation patterns, and phonetic characteristics, so screen readers load the appropriate library based on the declared language of the document. When the `<html>` element has no `lang` attribute or contains an invalid value — such as a misspelling or a fabricated code — the screen reader cannot determine which library to use. It defaults to whatever language the user configured during setup, which means content written in French might be read aloud using English pronunciation rules. The result is speech that sounds like a confusing, unintelligible accent.

This issue primarily affects **blind users** and **deafblind users** who rely on screen readers, but it also impacts **users with cognitive disabilities** who may use text-to-speech tools to aid comprehension. When pronunciation is wrong, understanding drops dramatically.

## Related WCAG Success Criteria

This rule maps to **WCAG Success Criterion 3.1.1: Language of Page** (Level A), which requires that the default human language of each web page can be programmatically determined. This is a Level A requirement — the most fundamental level of accessibility — meaning it must be satisfied for basic compliance under WCAG 2.0, 2.1, and 2.2. It is also required by the Trusted Tester methodology, EN 301 549, and RGAA.

## How to Fix It

1. Add a `lang` attribute to the opening `<html>` element.
2. Set its value to a valid BCP 47 language tag that represents the primary language of the page.
3. Double-check the spelling of the language code. Common valid codes include `"en"` (English), `"fr"` (French), `"es"` (Spanish), `"de"` (German), `"ja"` (Japanese), and `"ar"` (Arabic).
4. You can optionally include a regional subtag, such as `"en-US"` for American English or `"fr-CA"` for Canadian French.
5. For XHTML documents served as XML, use `xml:lang` instead of or in addition to `lang`.

If the language changes within the document for specific passages, use the `lang` attribute on the appropriate element to indicate the switch. For right-to-left languages, also include the `dir="rtl"` attribute.

## Examples

### Incorrect: Missing `lang` attribute

```html
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Welcome to my website.</p>
  </body>
</html>
```

Without a `lang` attribute, screen readers cannot determine the page language and will default to the user's configured language, which may not match the content.

### Incorrect: Invalid `lang` value

```html
<html lang="english">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Welcome to my website.</p>
  </body>
</html>
```

The value `"english"` is not a valid BCP 47 language tag. The correct code for English is `"en"`.

### Correct: Valid `lang` attribute

```html
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Welcome to my website.</p>
  </body>
</html>
```

### Correct: Regional subtag

```html
<html lang="fr-CA">
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <p>Bienvenue sur mon site web.</p>
  </body>
</html>
```

### Correct: Language change within the page

```html
<html lang="en">
  <head>
    <title>Multilingual Page</title>
  </head>
  <body>
    <p>This paragraph is in English.</p>
    <p lang="es">Este párrafo está en español.</p>
  </body>
</html>
```

### Correct: Right-to-left language

```html
<html lang="ar" dir="rtl">
  <head>
    <title>صفحتي</title>
  </head>
  <body>
    <p>مرحبا بكم في موقعي.</p>
  </body>
</html>
```

The `dir="rtl"` attribute ensures the text direction is correctly rendered for right-to-left languages like Arabic and Hebrew.
