Fix Missing HTML Lang Attribute for Better Accessibility
Without a language declaration, screen readers guess the page language based on user settings. If they guess wrong, content becomes incomprehensible.
What's happening
The lang attribute on the <html> element tells browsers and assistive technologies what language the page content is in. Screen readers use this to load the correct pronunciation rules, speech patterns, and voice.
Without a language declaration, screen readers have to guess the page language based on user settings. If they guess wrong, content becomes incomprehensible. A French page read with English pronunciation rules produces nonsensical audio. Even for English pages, missing the lang attribute affects hyphenation, quotes, and other language-specific features.
Diagnose
DevTools
- Open DevTools (F12).
- Elements panel > select the
<html>element. - Check if
langattribute exists with a valid value.
Quick console check:
const lang = document.documentElement.lang
if (!lang) {
console.error('HTML element is missing lang attribute')
}
else {
console.log('Page language:', lang)
}
View page source
- Right-click > View Page Source.
- First line after
<!DOCTYPE html>should be<html lang="...">.
Fix
1. Add lang attribute to HTML element
Add the lang attribute to your <html> element:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
2. Use correct language codes
Use BCP 47 language tags:
<!-- Basic language codes -->
<html lang="en"> <!-- English -->
<html lang="es"> <!-- Spanish -->
<html lang="fr"> <!-- French -->
<html lang="de"> <!-- German -->
<html lang="ja"> <!-- Japanese -->
<html lang="zh"> <!-- Chinese -->
<!-- With regional variants -->
<html lang="en-US"> <!-- American English -->
<html lang="en-GB"> <!-- British English -->
<html lang="pt-BR"> <!-- Brazilian Portuguese -->
<html lang="zh-Hans"> <!-- Simplified Chinese -->
<html lang="zh-Hant"> <!-- Traditional Chinese -->
3. Handle mixed-language content
When content switches language within the page, use lang on specific elements:
<html lang="en">
<body>
<p>The French phrase <span lang="fr">c'est la vie</span> means "that's life".</p>
<blockquote lang="de">
Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.
</blockquote>
<p>— Ludwig Wittgenstein</p>
</body>
</html>
Screen readers will switch pronunciation rules for the marked sections.
Framework examples
nuxt.config.ts:export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
lang: 'en'
}
}
}
})
<script setup>
// In your layout or page
const { locale } = useI18n()
useHead({
htmlAttrs: {
lang: locale.value
}
})
</script>
@nuxtjs/i18n module handles this automatically based on the current locale.// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/[locale]/layout.tsx
export default function LocaleLayout({ children, params }) {
return (
<html lang={params.locale}>
<body>{children}</body>
</html>
)
}
_document.js:// pages/_document.js
export default function Document() {
return (
<HTML lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</HTML>
)
}
User experience & bounce rate
While lang attributes are a lightweight signal for SEO geo-targeting, their biggest impact is on User Friction.
If you omit the lang attribute (or set it wrong), browsers like Chrome incorrectly detect the page language. This triggers the "Translate this page?" popup for every user.
- The friction: Users have to dismiss a popup before interacting with your site.
- The result: Increased bounce rate and lower time-on-page, which are negative signals for search engines.
- Geo-targeting: For international SEO, the
html langattribute works in tandem withhreflangtags to make sure the right regional version of your site is served to the right user.
Verify the fix
- Re-run Lighthouse - The "
<html>element has a[lang]attribute" audit should pass. - Console verification:
const lang = document.documentElement.lang
console.log('Lang attribute:', lang || 'MISSING')
console.log('Valid:', /^[a-z]{2,3}(?:-[A-Za-z]{2,4})?$/.test(lang))
- Screen reader test - The page should be read with correct pronunciation for the declared language.
Common mistakes
- Lang on body instead of HTML: Must be on
<html>, not<body>. The lang attribute on body is ignored by most tools. - Invalid language code:
<html lang="english">is invalid. Use proper BCP 47 codes likeen. - Empty lang attribute:
<html lang="">fails the audit. Must contain a valid code. - Wrong language: Setting
lang="en"on a French page is worse than no lang at all. Screen readers will mispronounce everything. - Regional variants: For content with regional spelling or vocabulary differences, use
en-USvsen-GB,pt-PTvspt-BR.
Related issues
HTML lang issues often appear alongside:
- Document title - Both are document-level requirements set in the head
- Heading order - Proper lang makes sure headings are pronounced correctly
- Hreflang - Multi-language sites need both HTML lang and hreflang
Test your entire site
Missing lang attributes often occur in error pages, legacy templates, or dynamically generated pages that bypass your main layout. Unlighthouse scans every page on your site and flags any missing lang attributes, so you have consistent accessibility across all routes.