How to fix html lang valid on Shopify Storefront API

Steps for Shopify Storefront API

1. In your headless/custom frontend (React, Next.js, etc.), find the root HTML document component (e.g. `_document.jsx` in Next.js or your root layout).
2. Pass the active locale from the Shopify Storefront API's `language` field to the `lang` prop: `<html lang={locale}>` where `locale` is the BCP 47 code returned by the API.
3. Verify by inspecting the rendered HTML source of your deployed storefront.

What is html lang valid?

Every web page starts with an `<html>` tag, and that tag should include a `lang` attribute that tells browsers, screen readers, and search engines what human language the page is written in — for example, `lang="en"` for English or `lang="fr"` for French. The value must be a valid BCP 47 language tag (a globally recognised standard). When this attribute is missing or contains an unrecognised code, assistive technology cannot determine the correct language automatically. WCAG Success Criterion 3.1.1 ("Language of Page") requires this for Level A conformance — the most basic level of accessibility compliance.

Screen readers use the `lang` attribute to select the correct voice, pronunciation rules, and text-to-speech engine for your content. Without a valid value, visually impaired shoppers may hear your product descriptions read back in the wrong language or with completely garbled pronunciation — making your store unusable for them. Beyond accessibility, missing or invalid language declarations expose you to legal risk under accessibility laws (ADA, EN 301 549, and similar regulations in many countries) that increasingly cover commercial websites and online stores. Search engines also use the declared language to serve your pages to the right regional audiences, so fixing this can indirectly protect your international SEO. The fix itself takes under five minutes and requires no coding skill on most platforms.

See the complete Html lang valid guide for every platform and the full background.