← All criteria

Understandable · Level A · 3.1.1

Language of Page

The <html> element needs a lang attribute (lang="en", lang="hr", and so on) stating what language the page is predominantly written in. It isn't decorative — it's what tells a screen reader which pronunciation rules to use for every word on the page.

  • Blind
  • Cognitive
  • Deaf / hard of hearing
The problem, in practice — select the image to enlarge it
An HTML code sample compared with a missing versus a declared page language attribute. 'Missing or incorrect page language' shows an <html> tag with no lang attribute, so a screen reader misreads the Croatian title 'Početna stranica' using English pronunciation rules ('Po-chet-na stra-ni-ca'). 'Page language is set' shows the same markup with lang="hr" added to the <html> tag, so the screen reader reads the same title correctly using Croatian pronunciation rules ('Počet-na stra-ni-ca'). Examples below contrast a page with no language declared, one with the wrong language declared, correct Croatian and English declarations, and a secondary language marked with a lang attribute on an inline span within otherwise Croatian content.

How to recognize it

Inspect the <html> element and check whether it has a lang attribute at all, and whether it's the right one. Missing entirely is one failure; wrong is another and arguably more common — a Croatian site left with lang="en" because that's what the starter template shipped with, and nobody touched it again. The practical symptom, if you actually listen with a screen reader, is that without the right lang it falls back to the screen reader's own default language and reads everything with the wrong pronunciation rules and stress patterns — genuinely hard to follow, since prosody is language-specific, not just vocabulary. It's an easy attribute to set once and an easy one to forget, because it lives in a template file most people touch on day one of a project and never look at again.

How to fix it

Set lang on the <html> element to the correct BCP 47 language code for whatever language the page's content is predominantly in — lang="en" for English, lang="hr" for Croatian. If a page genuinely mixes languages, this attribute reflects whichever language most of the content is in; individual passages written in a different language get their own lang attribute on the specific element wrapping them, which is a related but distinct requirement (3.1.2), not this one.

Example

Avoid

<html>
<!-- no lang attribute at all -->
<html lang="en">
<!-- page content is actually entirely in Croatian -->

Prefer

<html lang="hr">
<html lang="en">
<!-- correct, because this page's content actually is in English -->

Resources

  • 3.1.2 Language of Parts

    3.1.1 sets the language for the page as a whole; 3.1.2 covers individual passages written in a different language than the rest of the page, which need their own lang attribute rather than inheriting the page's default.