AccessLint Rule: The <html> element must have a lang attribute.

About this AccessLint rule

The <html> element is the root of every HTML page, and its lang attribute tells browsers and assistive technologies what language the page content is written in. When this attribute is missing, empty, or contains only whitespace, screen readers cannot determine which language rules and pronunciation to apply. This leads to garbled or incorrect speech output, making the page difficult or impossible to understand for people who rely on screen readers.

Screen readers support dozens of languages, each with its own pronunciation engine. A screen reader set to English that encounters unlabeled French content will attempt to read the French words using English phonetic rules, producing nonsensical audio. The lang attribute on the <html> element sets the default language for the entire page, so screen readers can switch to the correct pronunciation engine automatically.

This rule maps to WCAG 2 Success Criterion 3.1.1: Language of Page (Level A). This is a baseline requirement at the lowest conformance level, meaning every web page must satisfy it. The success criterion requires that the default human language of each page can be programmatically determined. Setting the lang attribute on the <html> element is the standard technique for meeting this requirement in HTML documents.

While the page language can theoretically be set through HTTP headers or <meta> elements, these methods are not reliably supported across assistive technologies. The lang attribute on <html> is the only method that works consistently.

Note that xml:lang alone is not sufficient for HTML pages served as text/html. The lang attribute must be present. You can include both lang and xml:lang if needed for XHTML compatibility, but lang is required.

How to fix it

Add a lang attribute to the <html> element with a valid BCP 47 language tag that matches the primary language of the page content. Common language tags include:

en for English
es for Spanish
fr for French
de for German
ja for Japanese
zh for Chinese
pt for Portuguese
ar for Arabic

You can also use region subtags for more specificity, such as en-US for American English or pt-BR for Brazilian Portuguese. The language tag is not case sensitive.

If sections of the page are in a different language than the primary language, use the lang attribute on those specific elements (e.g., <p lang="fr">) to override the page default for that section.

Examples

Missing `lang` attribute

This page has no lang attribute. Screen readers will guess the language or fall back to the user's default, which may not match the actual content.

<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>

Empty `lang` attribute

An empty string or whitespace-only value does not satisfy the requirement.

<html lang="">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>

Using `xml:lang` without `lang`

For HTML pages served as text/html, xml:lang alone is not recognized by browsers or most assistive technologies. The lang attribute must also be present.

<html xml:lang="en">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>

Correct: `lang` attribute with a valid language tag

<html lang="en">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>

Correct: page in Spanish

<html lang="es">
  <head>
    <title>Bienvenido</title>
  </head>
  <body>
    <p>El zorro marrón rápido salta sobre el perro perezoso.</p>
  </body>
</html>

Correct: page with a mixed language section

When the page is primarily in English but contains a passage in French, set the page lang to en and override it on the French section.

<html lang="en">
  <head>
    <title>Multilingual page</title>
  </head>
  <body>
    <p>This paragraph is in English.</p>
    <p lang="fr">Ce paragraphe est en français.</p>
  </body>
</html>