WCAG 3.1.1 — Language of Page

What this requires

The <html> element must carry a valid lang attribute with a BCP 47 language code (en, en-US, es, fr-CA, etc.). The value tells assistive technology, search engines, translation tools, and browsers how to handle the content — which pronunciation rules to apply, which hyphenation dictionary, which spell-check.

How AI coding tools fail this

The most common failure: starter templates that ship with no lang attribute at all. The AI assistant scaffolding a Next.js or Vite project forgets to set it, and nobody notices because the page renders visually identical. Screen readers fall back to the user's OS default, which guesses incorrectly more often than it guesses correctly.

The second pattern: copy-pasted boilerplate with the wrong language. A <html lang="en"> on a Spanish-language site, because every example on the web defaults to en. The screen reader announces every word with English phonetics, rendering the content unintelligible.

The third: pages with substantial content in a second language but no inline lang attributes on those sections. A blog post in English quoting a paragraph in French should mark that paragraph with lang="fr" so the screen reader switches voices for it. AI tools almost never do this without being asked.

Failing examples

A root layout with no language declaration at all:

<html>
  <body>{children}</body>
</html>

Inline content in a different language with no marker:

<p>The French phrase "raison d'être" means "reason for being".</p>

Passing examples

Declare the primary language on the root element:

<html lang="en">
  <body>{children}</body>
</html>

Mark inline content in another language:

<p>
  The French phrase <span lang="fr">raison d'être</span> means
  "reason for being".
</p>

Edge cases

Region-specific locales (en-GB, pt-BR) are preferred over bare language codes when the variant matters for pronunciation or date/number formatting.
Multilingual sites should set lang on each route to match the rendered locale. A Next.js i18n setup typically threads the locale through to the root layout.
xml:lang is for XML documents. HTML5 just needs lang.
Code samples are not natural language; the screen reader reads them character by character regardless. Don't mark them with lang.
Proper nouns in a different language usually don't need lang markers — the criterion targets substantive content in another language, not borrowed words.

How Jeikin handles this

Jeikin's CLI scanner flags <html> elements that are missing the lang attribute and maps each finding to WCAG 3.1.1. The MCP server reminds the connected AI tool to set lang on the root layout during project scaffolding, before any other content lands.

The dashboard tracks each finding through resolution with a timestamped audit trail.