• Success Criterion 3.1.1
  • Conformance level A

Language Switcher That Doesn’t Update the Page’s Lang Attribute

3.1.1 — Language of Page

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

single-page app localization switching UI language without updating document.documentElement.lang.

Example 

// User clicks "Espanol" in the language menu
function setLanguage(code) {
  translateVisibleText(code); // swaps all UI strings
  // document.documentElement.lang is never touched
}

Why it matters

After switching to Spanish, the page still declares English, so a screen reader keeps using English pronunciation on Spanish appointment instructions a patient needs to follow correctly.

How to test

Switch the site's UI language and check document.documentElement.lang in DevTools console: if it doesn't update to match, it fails.

How to fix

Any client-side language switch must update the lang attribute in the same step as the visible text, not as an afterthought.

function setLanguage(code) {
  translateVisibleText(code);
  document.documentElement.lang = code;
}

Outcome

A patient rescheduling an appointment in Spanish hears every instruction spoken correctly, with no mismatch left behind.

Who is affected

Screen reader users who switch the portal to Spanish need the speech engine to switch with it, especially when scheduling depends on understanding dates correctly.

Learn more

Related scenarios