accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Language of page

On this page:

Summary
Requirements
Guidance for iOS
Guidance for Android
Guidance for Flutter
Guidance for Web
More info

Summary

In code, identify the language that the content of the page is written in (English for example).

Requirements

The default language for the content of a page or app must be defined in the code.

Why?

This makes sure that screen readers automatically use the correct speech libraries for accent and pronunciation.

When listening, correct pronunciation helps understanding. For users of assistive technologies such as screen readers it is particularly important, as some have different speech synthesizers for different languages. For example, “chat” means something different when using English pronunciation rather than French.

Other benefits for the Web

In HTML, correctly setting the lang attribute also has other benefits:

The quotation marks that appear around the content of <q> elements are different for different languages;
The spellcheck attribute needs it to function properly, especially for multilingual users, as browser heuristics aren’t perfect;
Input components for dates and times also need it, because times and dates are written differently around the world.

Official wording in the Web Content Accessibility Guidelines

3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)

This applies to native apps by replacing “Web page” with “app”.

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for iOS

This section needs more content. Contribute via Github or email.

Guidance for Android

This section needs more content. Contribute via Github or email.

Guidance for Flutter

This section needs more content. Contribute via Github or email.

Guidance for Web

The language of the page is identified using the lang attribute of the html element.
- The <html> element of every page with English content includes lang="en".

Note: It’s better to only use the two-letter code representing the language (like lang="en"), rather than including the country as well (like lang="en-gb" or lang="en-us"):

If you use lang="en-gb", the content will be pronounced by screen readers with a British accent, regardless of the users’ preferences. That’s not ideal.
If you use just lang="en", the content will be pronounced with the accent that matches the users’ preferences.

Example

<html lang="en">
<!--  -->
</html>

Failure example

<html>
<!--  -->
</html>

Common mistakes

No lang attribute is present on the html element.
The lang attribute is present on the html element, but it incorrectly identifies the language of the page.

More guidance for Web

Using language attributes on the html element technique in the Web Content Accessibility Guidelines
Using the HTML lang attribute by The Paciello Group
Working with Language on the Web - W3C i18n tutorial
Language on the Web
On Use of the Lang attribute by Adrian Roselli

More info

Sources

W3C Web Content Accessibility Guidelines 2.1
Government Digital Service WCAG 2.1 Primer
Using the HTML lang attribute by The Paciello Group
Taylor Hunt’s contribution in On Use of the Lang attribute by Adrian Roselli
Barclays’ Accessibility Design Standards
The BBC’s Mobile Accessibility Guidelines

Contribute

This document is in beta. Help us by reporting issues via Github or email

This site is open source. Improve this page.