WCAG 2.2 success criterion, Level A
WCAG 3.1.1 Language of Page
Every page must say in its code which language it is written in, so that screen readers pronounce it properly and browsers treat it correctly.
- Number
- 3.1.1
- Level
- A
- Added in
- WCAG 2.2
- Guideline
- 3.1 Readable
- Principle
- Understandable
What it asks
A screen reader has to know a page’s language before it starts reading. If it applies English pronunciation to French text, or a French voice to English, the result is noise that nobody can follow. Browsers use the same information to choose fonts, break words at the end of lines, offer translation and check spelling. The page gives it with one attribute on the root element: <html lang="fr">.
The value has to be a language tag the browser recognises. The first part names the language: en for English, cy for Welsh, de for German. A region can follow it, as in en-GB, but the language part is what matters. A code that is not a language, or the wrong language, fails just as surely as no code at all. A common slip is lang="uk" on a British site, which is the code for Ukrainian.
The criterion covers the default language of the page as a whole. A page that is mostly English with one French quotation is an English page under 3.1.1; marking the quotation is 3.1.2 Language of Parts. It is Level A, and it is one of the simplest things in WCAG to get right, which is why it is so often wrong: a template ships without the attribute, or the English template is copied to every translated version with lang="en" still in it.
Its official name is success criterion 3.1.1 Language of Page, at Level A. It was added in WCAG 2.2, under guideline 3.1 Readable and the principle Understandable. The W3C’s normative text says, in part:
“The default human language of each Web page can be programmatically determined.”
From WCAG 2.2, W3C. Full explanation: Understanding 3.1.1 Language of Page.
Who it helps
People who use a screen reader or other text-to-speech software, which switches voice and pronunciation rules by language. People who read braille, because braille contractions differ from one language to another and the display picks the table from the page language.
It also helps anyone who relies on the browser’s translation offer, and people whose browser needs the language to choose the right font for a script.
What passes and what fails
These pass
<html lang="en">on a page written in English.<html lang="en-GB">on a page in British English. The region is allowed and the language part is right.<html lang="cy">on the Welsh version of a site, and<html lang="en">on the English version.- A mostly English page that quotes a line of Latin. 3.1.1 is met by the page language; the quotation is a question for 3.1.2.
These fail
- No
langattribute on the<html>element at all. lang="en"on a page written entirely in German, because the translated pages were built from the English template.lang="uk"meant to mean United Kingdom. The browser reads it as Ukrainian.lang="", which declares nothing.- A
<meta>tag stating the language with nolangon<html>. Assistive software reads the attribute, not the tag.
How to test it by hand
- View the page source, or open the browser’s developer tools and look at the
<html>element. - Check that it has a
langattribute with a value. - Check that the first part of the value is a real language code, and that it names the language most of the page is written in.
- Repeat on every translated version of the site. The home page and the French home page need different values.
- Write down each page where the attribute is missing, empty, not a language code or the wrong language.
What automated testing can decide
What a machine can decide
Presence and validity are mechanical. Automated testing can read the attribute on every page, check that the language part is a known code, and report pages with nothing or something that is not a language. It can also estimate from the words on the page which language they are in, which gives a lead when the declared language and the text disagree.
What it cannot
Correctness is a judgement. lang="en" on a French page passes every scanner that only checks the attribute. A short page, a page of product names and numbers, or a page that mixes two languages in similar amounts leaves any tool unsure which language is the default. Those need someone to look.
How Dreven handles it
Dreven records the language declared on every page in an audit and shows you each one beside the words on the page. A reviewer decides whether the declared language is right.
The report lists each page by address, so a translated template with the wrong code is easy to find and fix.
No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.
Related criteria
- 3.1.2 Language of Parts (Level AA). Passages in another language within the page need their own mark.
- 2.4.2 Page Titled (Level A). The page title is read in the language the page declares.
- 1.3.1 Info and Relationships (Level A). Language is one of the things the code must say about content that the eye can tell at a glance.
Questions people ask
Where does the lang attribute go?
On the html element, the first element in the page, for example <html lang="en">. Putting it on the body element or in a meta tag does not meet the criterion, because assistive software reads it from the html element.
Is lang="en" fine for British English?
Yes. The language part, en, is what the criterion needs. You can add a region, as in en-GB, which helps with spelling and pronunciation, but you do not have to. Do not write lang="uk" for the United Kingdom: uk is the code for Ukrainian.
What if a page is written in two languages equally?
Choose the language of the main content, or the one that comes first, as the page language, and mark the passages in the other language under 3.1.2. A page cannot declare two default languages.
Can an automated tool fully test 3.1.1?
It can tell whether the attribute is there and whether its value is a real language code. It cannot be sure the value is the right language for the page, though it can flag likely mismatches. That last check needs a person.