Language Rule

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. Screen readers use it to pick a voice: an English page read by a French voice is close to gibberish. Translation tools, spell checkers and hyphenation use it too. It is one attribute and it belongs on every page.

WCAG 2.2 A 3.1.1 Language of Page

Websight reports this as <html> element must have a lang attribute

Who it affects

Someone using a screen reader whose default voice is French opens the dentist's page and hears Opening hours pronounced as if it were French: oh-pen-ANG oor. Every word is mangled.

Someone reading on a Braille display gets the contractions of the wrong language, so words are abbreviated wrongly and reading slows to a crawl.

Someone with a translation extension is not offered a translation because the browser cannot tell what the source language is.

Broken versus fixed

The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.

Broken
<!doctype html>
<html>
<head>
  <title>Opening hours: Mill Street Dental</title>
</head>

No lang. A screen reader falls back to its default voice, whatever that happens to be.

Fixed
<!doctype html>
<html lang="en-GB">
<head>
  <title>Opening hours: Mill Street Dental</title>
</head>

en-GB is British English. The screen reader switches to an English voice before it reads a word.

Test it by hand in two minutes

  1. View the page source (Ctrl+U). The second or third line should be <html lang="...">.
  2. On a Mac, open VoiceOver Utility, set the default voice to another language, then open the page. It should still be read in English.
  3. Open the browser console and run document.documentElement.lang. An empty string means it is missing.
  4. Check every template: error pages, print layouts and HTML emails are the ones usually missed.

The fix

Before
<html>
After
<html lang="en-GB">

Use en for English, or en-GB for a British voice and spelling. Pick the language of most of the page; mark sections in another language separately with lang on that element.

Welsh page

Before
<html>
After
<html lang="cy">

Two-letter codes exist for most languages: cy Welsh, gd Scottish Gaelic, ga Irish, pl Polish, ur Urdu.

HTML email template

Before
<html xmlns="http://www.w3.org/1999/xhtml">
After
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Emails are read by screen readers too. If you add xml:lang, make it match lang.

Common mistakes

  • Putting lang on the body element instead of html.
  • Writing lang="english" or lang="en_GB"; use a two-letter code, with a hyphen before the region.
  • Setting the language once in a template and never changing it for translated pages.
  • Using lang="uk" to mean United Kingdom; uk is Ukrainian.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner checks that the html element has a lang attribute that is not empty. It cannot tell whether the language named matches the words on the page; html-lang-valid checks the code is well formed, and nothing automated reads the prose. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

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. AA Language codes on page sections must be valid valid-lang When part of a page is in a different language from the rest, put a lang attribute on that element. 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. A Every page needs a title document-title The title element in the head is the first thing a screen reader says when a page loads, the text on the browser tab, the name of the bookmark, and the headline in search results.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.