Level AUnderstandable
3.1.1

Language of Page

Tell the browser what language the page is in, with one small lang attribute, so screen readers pronounce it correctly.

In plain English

Your page is written in a language, and the browser needs to be told which one. That is done with a tiny attribute on the very first tag: <html lang="en">.

Screen readers use it to pick the correct pronunciation. Leave it off, and an English store might be read aloud with French or German pronunciation rules, turning your product descriptions into gibberish. It is a one-line fix with an outsized impact.

Who this is for

  • Screen-reader users, who get correct pronunciation only when the language is declared.
  • Translation tools and search engines, which use it to understand and process your content.

What “good” looks like

One attribute, on the root element.

<!-- Good -->
<html lang="en">

<!-- Bad: no language declared -->
<html>

If part of the page is in another language (say a French product name), mark just that part with its own lang (that is the related criterion 3.1.2).

Where stores get it wrong

Custom themes or landing pages that ship the <html> tag with no lang, and pages built by tools that forget it. It takes seconds to check: view source and look at the first line. Missing lang shows up on the common failures list.

How to meet it

Techniques the W3C accepts as sufficient (summarized). Follow a link for the full method.

Frequently asked questions

What does language of page require?+

Success Criterion 3.1.1 (Level A) says the default human language of each page must be set in the code, using the lang attribute on the html element, for example <html lang="en">.

Why does the lang attribute matter?+

Screen readers use it to load the right pronunciation rules. Without it, an English page might be read with the wrong accent or voice, and translation tools and search engines also rely on it to understand the content.

How do I fix it?+

Add lang to the opening html tag, matching the page's main language. On Shopify and most platforms this is a theme setting or a one-line template edit. It is one of the quickest accessibility fixes there is.

Reference

This is a plain-language explainer. The authoritative source is the W3C Web Content Accessibility Guidelines (WCAG) 2.2.

WCAG 2.2 © W3C. Excerpts are paraphrased; see the linked documents for the normative text.

Not sure if your store passes 3.1.1?

A human auditor checks this and every other criterion against your live store, and documents the result.

Book an audit