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.

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

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.

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

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.

Document has required lang attribute(s)

Introduction

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

What

Example of a correct lang attribute

When is this applicable?

Why

Examples

Pass examples

Fail examples

Affected users

How

How to review it

How to fix it

Additional resources

WCAG success criteria¶

Document has required lang attribute(s)

Introduction

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

What

Example of a correct lang attribute

When is this applicable?

Why

Examples

Pass examples

Fail examples

Affected users

How

How to review it

How to fix it

Additional resources

WCAG success criteria¶

Document has required lang attribute(s)

Introduction

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

What

Example of a correct lang attribute

When is this applicable?

Why

Examples

Pass examples

Fail examples

Affected users

How

How to review it

How to fix it

Additional resources

WCAG success criteria¶

Did not find what you were looking for?

Did not find what you were looking for?

Example of a correct `lang` attribute

Example of a correct `lang` attribute

Example of a correct `lang` attribute