Skip to main content

Default language is specified

ab-000125 · accessibility-wcag.understandable.lang-attribute
Severity: lowactive

Why it matters

The lang attribute on the <html> element tells screen readers which language to use for pronunciation. Without it, a French-language site read by VoiceOver defaults to the user's system language — French words get English pronunciation rules and become unintelligible. WCAG 2.2 SC 3.1.1 (Language of Page) is a Level A requirement. It is a one-line fix that has an outsized impact on all non-English content and multilingual applications.

Severity rationale

Low because the `lang` attribute is a one-attribute fix with zero functional impact beyond screen reader pronunciation, but its absence violates WCAG 2.2 SC 3.1.1 at Level A for every user who depends on synthesized speech.

Remediation

Add a valid BCP-47 language code to the root <html> element. In Next.js App Router, set it in app/layout.tsx.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en"> {/* or 'fr', 'de', 'ja', 'pt-BR', etc. */}
      <body>{children}</body>
    </html>
  )
}

For multilingual applications, also set lang on individual content sections when the language changes mid-page:

<blockquote lang="fr">Liberté, égalité, fraternité</blockquote>

Confirm the value is a valid BCP-47 tag (e.g., en, en-US, zh-Hant-TW) — not an ISO 639-2 three-letter code or a locale string like en_US.

Detection

  • ID: accessibility-wcag.understandable.lang-attribute

  • Severity: low

  • What to look for: Enumerate every relevant item. Check the root <html> tag for a lang attribute with a valid BCP-47 language code (e.g., "en", "en-US", "fr-CA").

  • Pass criteria: At least 1 of the following conditions is met. The <html> tag has a lang attribute with a valid language code.

  • Fail criteria: No lang attribute on <html> tag.

  • Skip (N/A) when: Never — language declaration applies to all HTML documents.

  • Detail on fail: Example: "<html> tag has no lang attribute. Screen readers cannot determine language for pronunciation"

  • Remediation: Add the lang attribute:

    export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

External references

Taxons

accessibility

History