WCAG 3.1.1 Language of Page (level A) explained

What it asks for, in plain English

The main language of the page has to be declared in code, normally with a lang attribute on the html element: lang="en" for English, lang="cy" for Welsh, lang="fr" for French. That one attribute tells a screen reader which voice and pronunciation rules to use, lets the browser offer a translation, and helps spell checkers and search engines.

It is about the language most of the page is in. A few foreign words do not change it; marking those up is the job of 3.1.2. If a page is genuinely half and half, declare the language that comes first or is used most.

The usual failures are leaving the attribute off altogether, using a made-up value such as lang="english", or copying an English template onto a page written in another language.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 3.1.1 page has the full intent, techniques and definitions.

Who it affects

Someone using a screen reader hears English read with French pronunciation rules, or the other way round, which turns ordinary words into noise.

A person with dyslexia using the browser's read-aloud feature gets the wrong voice and loses the thread of the text.

Someone reading in their second language cannot use the browser's offer to translate the page, because the browser does not know what it is translating from.

Example

Broken

<!DOCTYPE html>
<html>
<head>
  <title>Opening hours</title>
</head>
<body>
  <h1>Opening hours</h1>
  <p>We are open Monday to Saturday, 9am to 5pm.</p>
</body>
</html>

No lang attribute. A screen reader falls back to its default voice, which may be set to any language.

Fixed

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <title>Opening hours</title>
</head>
<body>
  <h1>Opening hours</h1>
  <p>We are open Monday to Saturday, 9am to 5pm.</p>
</body>
</html>

lang="en" is enough. Adding the region, en-GB, also picks British pronunciation and spelling where the software supports it.

How to check it

Open the page source (Ctrl+U on Windows, Cmd+Option+U on a Mac) and look at the opening html tag. It should have a lang attribute.
Check the value is a real language code: two letters such as en, cy, fr or de, optionally followed by a region such as en-GB. Values like "english" or "uk" are not valid.
Read a paragraph and confirm the declared language matches what is actually written on the page.
If the site exists in other languages, check each version declares its own language rather than inheriting the English template.

What Websight checks for 3.1.1

Websight runs these automated checks for 3.1.1:

A The page must say what language it is in html-has-lang The lang attribute on the html element tells browsers and screen readers which language the page is written in. A The page language code must be valid html-lang-valid A lang attribute only works if its value is a real language tag: a two or three letter code like en, cy or fr, optionally followed by a hyphen and a region, like en-GB. A lang and xml:lang must name the same language html-xml-lang-mismatch Some pages, usually ones generated as XHTML or from older templates, carry both a lang attribute and an xml:lang attribute on the html element.

Websight checks that the html element has a lang attribute, that the value is a recognised language code, and that it does not contradict an xml:lang attribute. It cannot tell whether the declared language matches the words on the page; a person has to read it.

Practical tips

Set lang in your base template once and every page inherits it.
On multilingual sites, generate the attribute from the same setting that chooses the content language, so the two cannot drift apart.
Use the shortest code that is true. lang="en" is fine; add a region only when it matters.

3.1.2 Language of Parts (level AA)

3.1.1 Language of Page