2 minute read

WCAG 3.1.1: Language of page (Level A)

Did you know that screen readers can speak many languages?

It matters, because you don’t want your English content sounding like it’s being read in French— the accenting and pronunciation will be very strange.

Language of Page makes sure every page declares its main language so that screen readers and translation tools have what they need.

Who this impacts

  • Screen reader users: Language settings help screen readers pronounce words accurately, making it easier to understand the content.
  • Translation tool users: Clear language declarations allow translation software to work effectively, improving access for non-native speakers.
  • People with smart home devices: These act a bit like screen readers, and need to know what language the page is in to read you that recipe properly.
  • Everyone: Setting a page’s language improves accessibility for anyone browsing content in a language they may not fully understand.

How to meet Language of Page

  • Set the primary language in the HTML code: Use the lang attribute in the HTML element to define the primary language of each page (e.g., <html lang=”en”> for English).
  • Ensure the language matches the content: Set the lang attribute to the actual language of the page’s content.
  • Test using screen readers: Make sure screen readers recognize the language setting and interpret the content correctly.

Practical example

Catbook sets the language for each profile page, so screen readers know to purr in French for Mademoiselle Minou or meow in Japanese for Neko-chan.

Maximus the grey cat looks excited with his mouth open.  He has four separate speech bubbles with 'meow' in them, in English, German, French, and Hindi.

Top tips

  • Define the language upfront: Use <html lang=””> to set the main language for each page, helping assistive tools interpret the content.
  • Match language settings to content: Make sure the language setting reflects the actual language used on the page.
  • Test with assistive technology: Check the page with screen readers to ensure language settings work as intended.

Further reading

Previous articleNext article
Back to top