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.

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.

Framework Notes

How to apply this fix in your stack.

// 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