Language of Page.

Accessibility WCAG 2.1/2.2 Automated Compliance

Screen readers need the page language to pronounce text correctly

What does this check test?

This check verifies that the default human language of every page is specified in the `lang` attribute on the `<html>` element. The value must be a valid BCP 47 language tag (e.g., `en`, `fr`, `ja`, `es`). Additionally, any passages of text in a different language than the page default should be marked with their own `lang` attribute (Success Criterion 3.1.2). This maps to WCAG 2.2 Success Criterion 3.1.1 (Level A).

Why does it matter?

Screen readers use the page language to select the correct pronunciation rules and speech synthesizer voice. Without a `lang` attribute, a screen reader might try to pronounce French text with English phonetics, rendering it incomprehensible. For example, the French word "oiseau" (bird) would be pronounced "oy-see-ow" instead of "wah-zo" if the screen reader defaults to English. The `lang` attribute also affects browser features like auto-translation, spell-checking, hyphenation, and quotation mark styling. This is one of the easiest WCAG criteria to implement — it is a single attribute on a single element.

Who is affected?

Front-end developers setting up HTML document templates, CMS developers configuring page templates, internationalization (i18n) engineers building multi-language support, and content authors writing in multiple languages within a single page. Most frameworks (Next.js, Nuxt, SvelteKit) provide a configuration option for the html lang attribute.

Where does this apply?

The `<html>` element on every page of the site. For multi-language content, inline language changes need `lang` attributes: foreign-language quotations, code samples with comments in another language, product names in their original language, legal text in required jurisdictions, and navigation labels for language switchers.

How to fix it

Set the lang attribute on the html element. Use the shortest valid subtag: `en` not `en-US` unless the distinction matters (it does for `pt-BR` vs `pt-PT`). Page-level language declaration:

html

<!-- Bad: missing lang attribute -->
<html>

<!-- Good: language declared -->
<html lang="en">

Inline language changes for foreign text:

html

<p>The French word <span lang="fr">bonjour</span> means hello.</p>
<blockquote lang="de">Alle Menschen sind frei und gleich...</blockquote>

Next.js configuration:

// next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'es'],
  },
};

Automated tools like axe-core and Lighthouse check for the presence and validity of the `lang` attribute — this is a fully automatable check with very high reliability.

References

AppVet checks Language of Page automatically

Run a free accessibility scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks