Level AWCAG 2.2

3.1.1 Language of Page

The default human language of each web page can be programmatically determined.

Why it matters

Screen readers
Without a lang attribute, content is read with the wrong language engine and becomes incomprehensible.
Multilingual support
Browser translation tools and dictionaries need language information to work correctly.
Text rendering
Browsers choose optimal fonts and character spacing based on the declared language.
Braille displays
Braille translation rules differ by language. Correct language identification is essential.

Live demo

Page language and screen readers

No lang attribute
<!DOCTYPE html>
<html>
  <head><title>Announcements</title></head>
  <body>
    <h1>Announcement list</h1>
    <p>Here are the latest announcements.</p>
  </body>
</html>
Screen reader output

Language is unknown → it is read with the default voice (for example, English)

"oh-shee-rah-seh ee-chee-rahn"
Reads Japanese text using English pronunciation rules

Persona perspective

Yamada (28) — Totally blind

I use a screen reader, but on sites without a lang attribute, Japanese text is read by the English engine and becomes nonsense. When 'oshirase' is pronounced 'oh-shee-rah-seh', I have no idea what it means.

Checkpoints

References