# HTML lang attribute is set
- **Pattern:** `ab-002499` (`seo-fundamentals.meta-tags.lang-attribute`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002499
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002499)
## Why it matters
The `lang` attribute on the `` element is the primary signal search engines use to serve your page to the correct language audience. Without it, Google may incorrectly categorize or exclude your content from language-segmented search results, reducing organic reach in your target market. Screen readers depend on the `lang` value to select the right pronunciation engine; an absent or wrong language code causes WCAG 2.2 SC 3.1.1 (Language of Page) to fail, potentially exposing your product to accessibility compliance liability.
## Severity rationale
Low because incorrect language declaration rarely causes functional breakage but does reduce SEO precision and introduces an accessibility compliance gap that compounds across all pages.
## Remediation
Set the `lang` attribute on the root `` element. In Next.js App Router this lives in `app/layout.tsx`:
```tsx
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
Use a valid BCP-47 code (`"en"`, `"en-US"`, `"fr-CA"`, etc.). For multilingual sites, set the primary language at the root and use per-route `lang` overrides or `hreflang` link tags to signal alternate locales.
## Detection
- **ID:** `lang-attribute`
- **Severity:** `low`
- **What to look for:** Check the root layout or `_document` for a `lang` attribute on the `` tag. In Next.js App Router, this is in the root `layout.tsx`. In Pages Router, it's in `_document.tsx`.
- **Pass criteria:** Enumerate all `` tags and their `lang` attributes across root layouts. The `` tag must have a `lang` attribute with a valid BCP-47 language code (e.g., `"en"`, `"en-US"`, `"fr"`, `"de"`). Before evaluating, extract and quote the exact `lang` attribute value found in the root layout. The value must be a non-empty string of at least 2 characters.
- **Fail criteria:** No `lang` attribute on the `` tag, or the `lang` attribute is an empty string.
- **Skip (N/A) when:** Never — every HTML document should declare its language.
- **Detail on fail:** `"No lang attribute on tag in root layout"`
- **Remediation:** The `lang` attribute helps search engines serve your content to the right language audience and assists screen readers with pronunciation. Add it to your root layout:
```tsx
// app/layout.tsx
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## External references
- wcag 3.1.1
Taxons: findability, accessibility
HTML version: https://auditbuffet.com/patterns/ab-002499