Skip to lesson content
WCAG 3.1.1 · Level AEasy2 min readStructure

Missing or Wrong Language Attribute

Overview

The <html> element must have a lang attribute so screen readers use the correct language, pronunciation rules, and voice.

The lang attribute on <html> tells screen readers which language to speak—and which pronunciation rules and voice to use. Without it, a screen reader may read English content with a French synthesizer (or vice-versa), turning your page into gibberish. It’s a two-minute fix (WCAG 3.1.1), it’s automatically detectable, and it’s a common failure simply because it’s easy to forget in a template.

WCAG Criterion:3.1.1
Conformance Level:Level A
Difficulty:Easy
Time to fix:~2 min
Category:Structure

The Problem

This pattern is inaccessible — avoid it.

[ AVOID ]
<!DOCTYPE html> <html> <head><title>My Site</title></head>

The Fix

Use this accessible pattern instead.

[ CORRECT ]
<!DOCTYPE html> <html lang="en"> <head><title>My Site</title></head> <!-- For multilingual content, use lang on the element: --> <p lang="fr">Bonjour le monde</p>

Step-by-step

  1. Add lang="en" (or the appropriate BCP 47 language code) to the <html> element.

  2. For content in a different language inline, add lang to that specific element.

  3. Use BCP 47 codes: en, fr, de, es, zh-CN, ar, etc.

Common Mistakes

  • No lang attribute on the <html> element.

  • A lang value that doesn’t match the actual content language.

  • Inline content in another language with no lang on that element.

  • Copy-pasting a boilerplate template that hard-codes the wrong language.

How to Test for It

  • View source and confirm <html lang="…"> is present and correct.

  • Run an automated scan—missing or invalid lang is reliably flagged.

  • Listen with a screen reader to confirm the correct voice is used.

Framework Notes

How to apply this fix in your stack.

[ REACT ]
// In public/index.html (Create React App / Vite): <html lang="en"> // Next.js: in next.config.js or layout.tsx: export default function RootLayout({ children }) { return <html lang="en">{children}</html>; }

FAQ

Related lessons