WCAG 3.1.1 Language of Page

Success criterion 3.1.1 lets browsers, screen readers and translation tools know which language a page is written in. A screen reader then picks the right voice and pronunciation, and braille displays and captions use the right rules. Without it, a German product page may be read aloud with English pronunciation and become hard to understand. It is level A, and EN 301 549 includes it as clause 9.3.1.1.

What the criterion requires

The default human language of each web page must be programmatically determined — software must be able to read it from the code. In HTML this is done with the lang attribute on the <html> element, for example <html lang="pl">.

When a page contains several languages, the default is the language used most. If two languages are used equally, it is the one used first. The criterion has no exceptions, but it only asks for the page default; individual phrases in other languages are covered by 3.1.2.

Typical failures on an online shop

• the theme template has no lang attribute at all;
• every language version of the shop says lang="en" because the attribute is hard-coded in the theme;
• an invalid value such as lang="english" or lang="ua" (the code for Ukrainian is uk);
• lang and xml:lang on the same element name different languages;
• checkout or account pages served by another app or template that forgets the attribute.

How to check it

Automated: our checker tests this on every scanned page with the rules html-has-lang, html-lang-valid and html-xml-lang-mismatch: missing attribute, a value that is not a valid language code, and a mismatch between lang and xml:lang.

By hand: open each language version of the shop and view the page source (or the Elements panel in developer tools). Confirm that the lang value matches the language visitors actually read. Do the same for checkout, account and help pages, which often use different templates.

How to fix it

• Add lang to the <html> element in the theme layout, using a valid language code (en, de, pl, uk, cs, ro…). A region subtag such as en-GB is allowed but not required.
• In multilingual shops, output the value from the current store language instead of hard-coding it. Shopify, WooCommerce and PrestaShop themes usually have a variable for this.
• Check that apps and third-party checkout pages set the attribute too.

Related criteria

• 3.1.2 Language of Parts — phrases in a different language inside the page.
• 2.4.2 Page Titled — another page-level setting checked on every page.
• WCAG 2.2 checklist — all level A and AA criteria in one list.

Frequently asked questions

How do I meet WCAG 3.1.1?

Set the lang attribute on the html element to the main language of the page, for example lang="de" for a German page. Each language version of the shop should declare its own language.

What if a page uses two languages?

The default language is the one used most on the page. Passages in another language are handled by 3.1.2 Language of Parts.

Can an automated checker test 3.1.1?

Mostly. It can see whether the lang attribute is missing or invalid. It cannot tell whether the declared language is the language the text is actually written in, so a person should glance at that.