Back to reviews and guides

HTML Lang Attributes and Accessibility: Why the Page Language Matters

The article explains how HTML lang attributes improve accessibility by guiding screen readers, spellcheck, hyphenation and meeting WCAG 3.1.1 and 3.1.2. It gives correct examples, common mistakes, a decision guide for BCP 47 tags, and a practical audit checklist.

How Do HTML Lang Attributes Help With Accessibility

The lang attribute tells user agents and assistive technology the human language of content. That helps screen readers choose the right pronunciation, guides spellcheck and hyphenation, and meets WCAG requirements on programmatic determinability of page language.

What the lang attribute controls for users

Setting a language is small code. The effects reach browser rendering, automated tools and real users who rely on assistive technology.

Screen readers and speech synthesis

Screen readers and built-in speech engines use the lang value to select a voice, a pronunciation model and language-specific rules. If a page is marked en-GB, the synthesiser will use British English pronunciation where available. For mixed-language content, nested lang on the element with different text tells the screen reader to switch voice or pronunciation midstream.

Spellcheck, hyphenation and line breaking

Browsers apply language-specific rules for hyphenation and line breaks. Editors and browser spellcheckers use the language tag to choose the correct dictionary. Without the right lang tag, users may see wrong hyphenation or repeated spelling errors flagged incorrectly.

Standards, WCAG and programmatic determinability

WCAG lists language rules under two success criteria. WCAG 2.1 has 3.1.1 “Language of Page” at level A and 3.1.2 “Language of Parts” at level AA. Both require that the default page language and any changes in language be programmatically determinable. That normally means a correct lang attribute on the <html> element and where parts differ.

Correct markup examples

Use the BCP 47 language tag format. Examples follow.

  • Page default: <html lang=“en-GB”>
  • Different paragraph in French: <p lang=“fr”>Bonjour</p>
  • Chinese with script subtag: <span lang=“zh-Hant”>繁體中文</span>
  • Right-to-left language needs explicit direction: <html lang=“ar” dir=“rtl”>

Common mistakes and how they harm users

  • Missing lang on the <html> element. Assistive tech may guess wrong.
  • Wrong or non-BCP 47 tags, for example custom labels like “UK” instead of en-GB.
  • Setting lang only on the server header without an HTML attribute. HTTP headers do not guarantee programmatic determinability for assistive tech.
  • Marking a whole page as one language when major sections use another. Screen readers may mispronounce long passages.

How to choose the right tag: a short decision guide

  1. If the entire site uses one language and variant, set that on <html> (for example en-GB).
  2. If parts use a different language, add lang to the containing element only for those parts.
  3. When script matters use a script subtag: use zh-Hans for simplified Chinese and zh-Hant for traditional Chinese.
  4. Prefer the most specific valid BCP 47 tag you know. Do not invent tags.

Step-by-step audit and fix checklist

  1. Open a representative page and view the root <html> element. Confirm it has a valid BCP 47 lang value.
  2. Search the page for text in other languages. Add lang to the smallest container that contains the foreign-language text, normally a <span> or <p>.
  3. Where text uses a different script, add a script subtag. Add dir=“rtl” for right-to-left blocks.
  4. Validate the final HTML with the W3C HTML validator to catch malformed attributes.
  5. Test with at least one screen reader (for example NVDA on Windows or VoiceOver on macOS). Listen for correct pronunciation and for voice switches at language boundaries.
  6. Run an automated accessibility scan, then prioritise fixes that relate to language tagging and element labelling.

Real scenarios and quick fixes

Multilingual blog posts

Set the site default on <html>. For translated passages wrap them in <section lang=“xx”> or <blockquote lang=“xx”>. This keeps screen readers from mispronouncing long quoted sections.

Inline phrases or brand names in another language

Wrap short phrases in a <span lang=“xx”>. Keep the tag as local as possible to avoid unnecessary voice switching.

Dynamic content and single-page apps

When injecting content, set the element’s lang before inserting text. If the app swaps language for the whole UI, update <html lang=“…”> so assistive technology can detect the change.

Tools to validate and test language marking

  • W3C HTML validator for syntax and attribute errors.
  • Automated accessibility scanners such as axe or WAVE for language-related WCAG items.
  • Screen readers: NVDA, VoiceOver, JAWS for manual listening tests.
  • Browser developer tools to inspect the DOM and confirm lang values are present.

Final checklist before you publish

  • Root <html> has a valid BCP 47 lang tag.
  • Any text in a different language has an explicit lang on a containing element.
  • Right-to-left text includes dir=“rtl” when needed.
  • Test with a screen reader and an automated tool. Fix issues that affect pronunciation and programmatic language detection.

Correct language tags are a small change with a large effect on accessibility. They reduce confusion for assistive technology and help meet WCAG requirements on language identification.