DEV Community

Kai Mercer
Kai Mercer

Posted on

Check the lang attribute on your landing page: a one-minute test

#webdev #a11y #html

It is easy to forget the lang attribute on the <html> element. The page looks the same without it, so nothing prompts you to add it. For someone using a screen reader, it can change how every word is pronounced. Here is a one-minute check.

The check

View the source of your landing page (not the inspected DOM) and look at the first tag:

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

If there is no lang, or it is empty, or it says the wrong language, fix that first.

What the standards say

  • W3C's page for WCAG 3.1.1, Language of Page, states the requirement as: the default human language of each web page can be programmatically determined. Its stated reason is that screen readers can load the correct pronunciation rules, and visual browsers can display characters and scripts correctly.
  • MDN says the value is a single BCP 47 language tag, such as en or en-GB. An empty lang="" sets the language to unknown, and an invalid tag is treated as invalid. MDN also recommends always specifying it, especially because of accessibility.

A few details worth knowing

  • Elements without their own lang inherit it from their parent, so one attribute on <html> covers the page.
  • If a page uses several languages, W3C describes the default language as the one used most. For a block in another language, add lang on that element, for example <blockquote lang="fr">.
  • lang on <html> is not the same as the HTTP Content-Language header. MDN lists the header as another place a language can be specified when no ancestor sets one, but the attribute is the thing to check in your markup.

If you build pages from a template

Check the template or framework layout file, not each page. A missing attribute is usually one line in one file, for example the root layout or index.html.

Quick test

  1. Open the page source and search for <html.
  2. Confirm there is a lang value and that it matches the language the page is written in.
  3. If you have a screen reader available, listen to the first heading with the wrong value and the right one. The difference is usually obvious.

Sources: W3C Understanding 3.1.1 and MDN: lang attribute.

What does the <html> tag on your site say right now?

Top comments (1)

Collapse
 
launchgatecheck profile image
Launch Gate •

The template point is the useful one. A missing lang is usually a single line in the root layout, so it tends to be wrong on every page at once rather than on one. Worth checking the rendered source rather than the framework config too, since some setups set it client-side after load and a screen reader reads the initial HTML. Small check, easy to miss.