Skip to main content
WCAG Patterns

WCAG 3.1.1 · Level A · WCAG 2.0

Language of Page

Set the default human language of the page programmatically with <html lang>. Screen readers switch pronunciation engines on this.

Principle
Understandable
Guideline
Readable
Level
A
Added in
WCAG 2.0

What it really means

The default human language of the page must be declared programmatically. For HTML, that's the lang attribute on the root <html> element. Screen readers switch pronunciation engines on this value — English words spoken with a Swedish engine sound like TTS garbage, and vice versa.

Who it helps

  • Screen-reader users — pronunciation, inflection, prosody all depend on the correct TTS voice.
  • Braille-display users — character-set and grade rules vary by language.
  • Translation tools — browsers and extensions use lang to decide whether to offer a translation.
  • Search engines — language is a ranking and regionalisation signal.

How to test

  1. View source. Confirm <html lang="en"> (or sv, de, fr…) on every page.
  2. Run axe DevTools — html-has-lang and html-lang-valid catch missing or malformed values.
  3. If you serve multiple languages, confirm each page has the correct value — not a default copy-pasted from a template.

A failing pattern

<!-- Missing lang entirely. -->
<html>
  …
 
<!-- Invalid value — "english" is not an ISO code. -->
<html lang="english">
 
<!-- Hard-coded English on a Swedish page. -->
<html lang="en">
  <body>
    <h1>Välkommen till WCAG Patterns</h1>

A passing pattern

// Next.js App Router — set it in the root layout.
// src/app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

For i18n sites, compute the value from the active locale:

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

For passages in a different language (a French quote in an English article, a Swedish placename) use 3.1.2 Language of Parts:

<p>
  The Swedish word <span lang="sv">lagom</span> translates loosely as
  "just right".
</p>

Valid values

Use BCP 47 language tags. The most common shapes:

  • en — English (unspecified regional variant)
  • en-US, en-GB — regional variants
  • sv — Swedish
  • zh-Hant, zh-Hans — Traditional/Simplified Chinese

Avoid long names (english), language names in another language (svenska), or ISO-639-3 codes (eng) — those are all silently discarded or fall back to an English TTS.