3.1.1 Language of Page

Introduction¶

This success criteria states that websites must provide a way for assistive technology to determine the language of a page.

What¶

Every HTML document must have a lang attribute on the <html> element to indicate the primary language of the page. This helps assistive technologies such as screen readers to determine how to pronounce and interpret the text correctly.

The lang attribute should:

Be present in the <html> element.
Contain a valid BCP 47 language code, for example en for English, fr for French, es for Spanish, and so on.

Example of a correct `lang` attribute¶

<html lang="en">
<head>
  <title>Example Page</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

When is this applicable?¶

This check applies to all HTML documents.

Why¶

Valid lang attributes improve accessibility and usability in the following ways:

Ensure correct screen reader pronunciation
Without a language declaration, screen readers may use the wrong pronunciation rules.
Support text-to-speech tools
Some assistive technologies adjust pronunciation and reading patterns based on the language.
Enhance SEO and translation tools
Search engines and translation services rely on the lang attribute to provide relevant results and accurate translations.

Examples¶

This section provides pass and fail examples for this check.

Pass examples ¶

A document with a valid lang attribute

<html lang="fr">
<head>
  <title>Exemple de page</title>
</head>
<body>
  <p>Bonjour le monde !</p>
</body>
</html>

The lang="fr" attribute correctly identifies the page as French.

A multilingual document with language changes
```
This is an English paragraph.
Este es un párrafo en español.
```
The lang="es" attribute correctly marks the Spanish text.

Fail examples ¶

Missing lang attribute on the <html> element
```
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  Hello, world!
</body>
</html>
```
Without a lang attribute, screen readers may use the wrong pronunciation rules.
Empty or incorrect lang attribute
```
<html lang="">
<head>
  <title>Example Page</title>
</head>
<body>
  Hello, world!
</body>
</html>
```
An empty lang attribute is invalid and does not provide useful information.
Invalid language code
```
<html lang="english">
```
Ensure that there is a valid language code, english is not a valid language code. The correct code is en.

Affected users¶

This check primarily benefits:

Screen reader users who rely on correct pronunciation.
Multilingual users who need accurate translations.
Search engine users who depend on correct language indexing.

How¶

This section provides instructions for how to review and fix a lang attribute.

How to review it¶

Check for a lang attribute on the <html> element.
- Open Developer Tools (F12) → Elements Tab.
- Locate the <html> tag and confirm that there is a lang attribute with a valid value.
Ensure that language changes are marked in the content.
- If a webpage contains multiple languages, ensure that the different languages are marked with the lang attribute on relevant elements.

How to fix it¶

Add a valid lang attribute.
If the attribute is missing, add the correct language code to the <html> tag:

<html lang="en">

Fix any empty or incorrect lang attribute values.
Ensure that the lang attribute contains a valid BCP 47 language code, such as:
- en (English)
- fr (French)
- de (German)
- es (Spanish)
- zh-CN (Simplified Chinese)
If the page contains multiple languages, apply langattributes where needed:
```
Questo è un testo in italiano.
```

Additional resources¶

WCAG success criteria¶¶

3.1.1 Language of Page.

Did not find what you were looking for?

If this content did not answer your questions, try searching or contacting our support team for further assistance.

Acquia Optimize Support

Loading...

Document has required lang attribute(s)