# <html> element must have a lang attribute

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

Screen readers rely on distinct sound libraries for each language, with pronunciation rules, intonation patterns, and phonetics tailored to that specific language. When a user navigates to a page, the screen reader checks the `lang` attribute on the `<html>` element to determine which sound library to load. If no `lang` attribute is present, the screen reader falls back to whatever default language the user configured during setup. For someone who speaks multiple languages and browses websites in different languages, this creates a serious problem — the screen reader will attempt to read foreign-language content using the wrong pronunciation rules, producing garbled or incomprehensible speech.

This issue primarily affects blind and deafblind users who rely on screen readers, but it also impacts users with cognitive disabilities who may use text-to-speech tools. When text is read aloud with the wrong language rules, even simple words become unrecognizable, effectively making the content inaccessible.

## Related WCAG Success Criteria

This rule maps to **WCAG 2.0, 2.1, and 2.2 Success Criterion 3.1.1: Language of Page** at Level A — the most fundamental level of conformance. This criterion requires that the default human language of each web page can be programmatically determined. It is also referenced by the Trusted Tester guidelines (11.A), EN 301 549, and RGAA.

## How to Fix It

Add a `lang` attribute with a valid language code to the opening `<html>` element. The value should represent the primary language of the page content.

You can use a simple two-letter language code (like `en` for English, `fr` for French, or `de` for German), or you can be more specific with a regional dialect code like `en-US` for American English or `fr-CA` for Canadian French. A full list of valid language subtags is available in the [IANA Language Subtag Registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).

If sections of your page contain content in a different language than the primary one, use the `lang` attribute on those specific elements so screen readers can switch sound libraries mid-page.

For languages written right to left (such as Arabic or Hebrew), also include the `dir` attribute with a value of `rtl` to indicate the text direction.

## Examples

### Incorrect: Missing `lang` attribute

This will trigger the rule because the `<html>` element has no `lang` attribute:

```html
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>
```

### Correct: `lang` attribute with a valid language code

```html
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>
```

### Correct: Using a regional dialect code

```html
<html lang="en-US">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>
```

### Correct: Handling inline language changes

When a portion of the page is in a different language, use the `lang` attribute on the containing element:

```html
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>The French word for hello is <span lang="fr">bonjour</span>.</p>
  </body>
</html>
```

### Correct: Right-to-left language with `dir` attribute

```html
<html lang="ar" dir="rtl">
  <head>
    <title>موقعي</title>
  </head>
  <body>
    <h1>مرحبا</h1>
  </body>
</html>
```
