Valid lang

Quick win

Found on 1% of audited stores.

Add or correct the `lang` attribute on every HTML element that contains content in a different language, using a valid BCP 47 language code.

What it is

Every HTML page has a primary language declared on its `<html>` tag (e.g. `lang="en"` for English). When a block of text on that page is written in a different language — a French product description on an English store, for example — that element needs its own `lang` attribute with a valid language code so assistive technology knows to switch pronunciation rules. The "valid-lang" rule fires when a `lang` attribute exists on an element but contains an unrecognised or misspelled value (e.g. `lang="english"` instead of `lang="en"`, or `lang="en_US"` instead of `lang="en-US"`). Valid codes follow the BCP 47 standard: a two- or three-letter primary subtag (`en`, `fr`, `de`, `zh`) optionally followed by a region subtag after a hyphen (`en-US`, `fr-CA`, `zh-Hant`).

Why it matters

Screen readers such as JAWS, NVDA, and VoiceOver use the `lang` attribute to select the correct text-to-speech voice and pronunciation engine. An invalid value means the reader either ignores the instruction or speaks the text with completely wrong phonetics, making your content incomprehensible to blind and low-vision shoppers. WCAG 2.1 Success Criterion 3.1.2 is a Level AA requirement, meaning failure can expose your store to accessibility lawsuits (ADA, Section 508, EU Accessibility Act). Beyond legal risk, Google uses language signals to serve your pages to the right regional audiences — incorrect or absent language markup can suppress your rankings in multilingual search results and reduce qualified organic traffic.

How to fix it

Identify every element on your pages that carries a lang attribute and note the current value (your scanner report lists them).
Look up the correct BCP 47 code for each language at the IANA Language Subtag Registry: use the two-letter ISO 639-1 code (e.g. 'en', 'fr', 'de', 'es', 'zh') and add a hyphen + ISO 3166-1 region code only when necessary to distinguish dialects (e.g. 'en-GB', 'pt-BR', 'zh-Hant').
Never use underscores (en_US), full language names (english), or made-up codes — these are the most common causes of this error.
Fix the primary page language on your <html> tag first (e.g. lang="en"), then add correct lang attributes to any inline passages that genuinely differ from the page language.
After saving, re-run your accessibility scanner (axe DevTools, WAVE, or Lighthouse) on the affected pages to confirm no valid-lang violations remain.
If your store serves multiple languages via translated pages, ensure your CMS or theme automatically outputs the correct lang value on each locale's <html> tag — do not hard-code a single language across all locales.

Fix it on your platform

Pick your platform for the exact steps.

How to fix valid lang on Shopify

Go to Online Store → Themes → click 'Edit code' on your active theme.
Open layout/theme.liquid (this file contains your <html> tag).
Find the opening <html> tag — it usually looks like <html class="..."> — and add or correct the lang attribute: <html lang="{{ request.locale.iso_code }}">. Shopify's request.locale.iso_code outputs a valid BCP 47 code automatically for each active locale.
Click Save.
For inline foreign-language passages in product descriptions or page content, edit the HTML directly in the rich-text editor (click the </> source button) and add lang="fr" (or the correct code) to the wrapping or tag.
If you use Shopify Markets with multiple languages, verify the above Liquid variable is present — it ensures every translated storefront gets the correct lang value without any further changes.

Full Shopify guide →Official Shopify docs ↗

How to fix valid lang on Shopify Plus

Follow the same steps as Shopify above; Shopify Plus uses the same theme.liquid architecture.
For headless or custom storefronts built on the Storefront API, set the lang attribute server-side based on the locale returned by the API, e.g. in your Next.js or Hydrogen layout component: <html lang={locale.isoCode}>.
If you use Shopify Plus Scripts or checkout extensions, also ensure any custom checkout HTML includes a valid lang attribute on its root element.

Full Shopify Plus guide →Official Shopify Plus docs ↗

How to fix valid lang on WooCommerce

WordPress automatically outputs lang="{locale}" on the <html> tag via the language_attributes() template tag — verify your active theme calls <?php language_attributes(); ?> inside the <html> tag in header.php (Appearance → Theme File Editor → header.php).
To change the site language go to Settings → General → Site Language and select the correct language from the dropdown; WordPress will translate the locale code to a valid BCP 47 value.
For inline foreign-language text in product descriptions, switch the block editor to HTML view (⋮ menu → Edit as HTML) and wrap the passage: Texte en français.
Install the 'WPML' or 'Polylang' plugin if you run a multilingual store — both plugins hook into language_attributes() and output the correct lang code for each translated page automatically.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix valid lang on BigCommerce

Go to Storefront → My Themes → click Customize on your active theme, then Advanced → Edit Theme Files.
Open templates/layout/base.html (or the equivalent layout file for your theme, e.g. Cornerstone uses templates/layout/base.html).
Find the <html> tag and set it to <html lang="{{locale_name}}"> — BigCommerce's Handlebars context exposes locale_name as a valid BCP 47 code.
Click Save & Apply.
For inline foreign-language text in product descriptions, use the HTML source editor in the product description field (Products → Edit Product → Description → click the <> HTML button) and add a lang attribute to the relevant tag.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix valid lang on Adobe Commerce (Magento)

In the Magento admin go to Content → Design → Configuration, select your store view, and confirm the HTML Head locale is set correctly.
Open your theme's root layout file: app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default_head_blocks.xml — or the equivalent — and verify the html lang attribute is rendered dynamically.
In Magento 2 the <html> tag lang attribute is output by the root.phtml or html_head.phtml template; open app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml and ensure it contains: <html lang="<?= $block->escapeHtmlAttr($block->getLang()) ?>">.
For inline passages in CMS blocks or product descriptions, go to Content → Blocks (or the product edit page), click 'Show/Hide Editor' to access raw HTML, and add lang="de" (or appropriate code) to the wrapping element.
Run bin/magento cache:flush after saving theme file changes.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

How to fix valid lang on Wix

Go to Settings → Multilingual (for multilingual sites) and ensure the correct language is assigned to each language version — Wix will output the correct lang attribute on the <html> tag for each language automatically.
For a single-language site go to Settings → Language & Region and confirm your site language is set correctly; Wix uses this to set the page lang attribute.
To add a lang attribute to an inline text element (e.g. a foreign-language quote), click the text element in the Wix Editor → click the </> Embed Code option or use a Custom Element, since Wix's standard text widget does not expose the lang attribute directly. Alternatively, use Wix Velo: select the element, open the Velo panel, and set element.setAttribute('lang', 'fr') in the page code.
For Wix Studio sites, use the DevMode / Custom Code panel to target specific elements and set valid lang attributes via JavaScript.

Full Wix guide →Official Wix docs ↗

How to fix valid lang on Squarespace

Squarespace automatically sets the <html lang> attribute based on your site's language setting: go to Settings → Region & Language → Site Language and choose the correct language — Squarespace translates this to a valid BCP 47 code.
For inline foreign-language text blocks, add a Code Block (Insert Point → Code) and write: Votre texte ici.. This is the only way to attach a lang attribute to a specific passage in Squarespace.
If you use Squarespace's built-in multilingual feature (Business plan and above), each language version will inherit the correct lang attribute automatically — verify by previewing the alternate locale and inspecting the <html> tag.

Full Squarespace guide →Official Squarespace docs ↗

How to fix valid lang on Webflow

Open your Webflow project in the Designer.
To set the site-wide HTML lang attribute: go to Project Settings → Localization (or SEO) → find the 'HTML lang attribute' field and enter the correct BCP 47 code (e.g. en, fr, de). For Webflow Localization (paid feature), each locale gets its own lang code automatically.
To add a lang attribute to a specific element (e.g. a div with French text): select the element in the Designer → open the Element Settings panel (D key) → scroll to Custom Attributes → click + and enter Name: lang, Value: fr (or the correct code).
Publish your site and inspect the live HTML to confirm the attribute is present with the correct value.

Full Webflow guide →Official Webflow docs ↗

How to fix valid lang on Magento Open Source

Follow the same steps as Adobe Commerce (Magento) above — the template path and locale configuration are identical in Magento Open Source.

Full Magento Open Source guide →Official Magento Open Source docs ↗

How to fix valid lang on PrestaShop

PrestaShop generates the `<html lang>` attribute from the active language. Go to Admin → International → Translations → Languages and verify the language code (ISO code field) for each installed language is a valid two-letter ISO 639-1 code (e.g. `en`, `fr`, `de`).
In your active theme, open `templates/_partials/head.tpl` (or the root layout file). Find the `<html` tag and ensure it uses the Smarty variable `{$language.iso_code}` rather than a hard-coded value.
If using a custom or third-party theme that hard-codes an invalid `lang` value, override the template in your child theme and correct it.
Save, clear cache (Admin → Advanced Parameters → Performance → Clear cache), and verify.

Full PrestaShop guide →Official PrestaShop docs ↗

How to fix valid lang on WordPress.org

Same resolution as WooCommerce for the root `lang` attribute: Settings → General → Site Language in the WordPress admin.
Ensure your active theme's `header.php` uses `<?php language_attributes(); ?>` on the `<html>` tag rather than a hard-coded `lang` value.
For block themes (Full Site Editing), go to Appearance → Editor → Templates → open the root template and ensure no hard-coded `lang` override is present in any HTML block.
Verify with the axe browser extension after saving.

Full WordPress.org guide →Official WordPress.org docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find valid lang — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Valid lang?

Every HTML page has a primary language declared on its `<html>` tag (e.g. `lang="en"` for English). When a block of text on that page is written in a *different* language — a French product description on an English store, for example — that element needs its own `lang` attribute with a valid language code so assistive technology knows to switch pronunciation rules. The "valid-lang" rule fires when a `lang` attribute exists on an element but contains an unrecognised or misspelled value (e.g. `lang="english"` instead of `lang="en"`, or `lang="en_US"` instead of `lang="en-US"`). Valid codes follow the BCP 47 standard: a two- or three-letter primary subtag (`en`, `fr`, `de`, `zh`) optionally followed by a region subtag after a hyphen (`en-US`, `fr-CA`, `zh-Hant`).

Why does valid lang matter?

How do I fix valid lang?