How to Add the HTML lang Attribute
What is this?
The lang attribute on the <html> element tells browsers and assistive technologies what language your page content is written in. This is a WCAG 2.1 Level A requirement (Success Criterion 3.1.1).
Why it matters
- Accessibility: Screen readers use the lang attribute to select the correct pronunciation and voice
- SEO: Search engines use it to serve your page to users searching in that language
- Browser features: Enables correct hyphenation, spell-checking, and translation prompts
How to fix it
HTML
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
</html>
Common language codes: en (English), es (Spanish), fr (French), de (German), ja (Japanese), zh (Chinese), pt (Portuguese).
For regional variants, use subtags: en-US, en-GB, pt-BR, zh-TW.
For multilingual pages
Use the lang attribute on specific elements to mark sections in a different language:
<html lang="en">
<body>
<p>This is English text.</p>
<blockquote lang="fr">Ceci est un texte en francais.</blockquote>
</body>
</html>
WordPress
Add to functions.php:
// WordPress usually sets this from Settings > General > Site Language
// To force it, add:
add_filter('language_attributes', function() {
return 'lang="en"';
});
Next.js
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
},
};
Common mistakes
- Using an invalid language code. Refer to IANA Language Subtag Registry for valid codes.
- Setting the lang to the wrong language (e.g.,
lang="en"on a Japanese page). - Forgetting to update the lang attribute when serving translated content dynamically.
Test your fix
After adding the lang attribute, audit your site on BeaverCheck to verify it in the Accessibility tab.