Missing or wrong language attribute.

The problem

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.

The fix

<!DOCTYPE html>
<html>
<head><title>My Site</title></head>

<!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. 1Add lang="en" (or the appropriate BCP 47 language code) to the <html> element.
2. 2For content in a different language inline, add lang to that specific element.
3. 3Use 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.

In your framework

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

Questions