Understandable · 3.1 Readable
The default human language of each page must be programmatically determinable, which in HTML usually means a correct language code in the lang attribute of the html element. Passages in other languages are covered separately by 3.1.2.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Listen in each version and compare the voice. The log shows which language the voice used.
The box below stands for a whole page from a library website in Lyon. All of its text is in French.
La médiathèque est ouverte du mardi au samedi, de dix heures à dix-huit heures.
L'inscription est gratuite pour tous les habitants de la ville.
The box below stands for a whole page from a library website in Lyon. All of its text is in French.
La médiathèque est ouverte du mardi au samedi, de dix heures à dix-huit heures.
L'inscription est gratuite pour tous les habitants de la ville.
The tools follow the version you last used.
What happened
Why it passes
The page declares French with lang="fr", so the speech uses a French voice and the words sound the way a French reader expects.
Why it fails
The page declares English with lang="en" although the text is French, so an English voice reads it with English rules and many words become hard to recognize.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
+ lang="en"
Fails
Live preview
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Your order is confirmed - Northfield Books</title></head><body> <p>Your package will arrive on Thursday.</p></body></html>The html element has no lang attribute, so software has to guess the language. A screen reader set to another language may read the whole page with the wrong voice.
Passes
Live preview
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Your order is confirmed - Northfield Books</title></head><body> <p>Your package will arrive on Thursday.</p></body></html>lang="en" is a valid language code for English, so screen readers pick an English voice and browsers know which language to translate from. This is technique H57.
− "en" + "fr"
Fails
Live preview
<html lang="en"><head> <meta charset="utf-8"> <title>Votre commande est confirmée</title></head><body> <p>Votre colis arrivera jeudi.</p></body></html>A language is declared, but it is the wrong one. Screen readers read the French text with English pronunciation rules, which makes it hard to understand.
Passes
Live preview
<html lang="fr"><head> <meta charset="utf-8"> <title>Votre commande est confirmée</title></head><body> <p>Votre colis arrivera jeudi.</p></body></html>The French version declares lang="fr", so the screen reader switches to a French voice. A regional code such as fr-CA is also valid when the variant matters.
Fails
Live preview
<html lang="english"><head> <title>Your order is confirmed - Northfield Books</title></head>"english" is not a registered language subtag, so the language still cannot be determined. Use a code from the IANA Language Subtag Registry, such as en.
Why it matters
Screen readers and text-to-speech tools use the declared language to pick the right voice and pronunciation rules, and browsers use it for translation and display. Without it, blind users and people who listen to text for reading support may hear garbled speech.
W3C: Understanding 3.1.1Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures