[ { "role": "user", "content": "when%20a%20screen%20reader%20aproaches%20a%20language%20switcher%20component%2C%20how%20should%20it%20be%20announced%3F%20and%20show%20me%20the%20resources%3F" }, { "role": "assistant", "content": "Here\u2019s how to ensure your **language switcher** (sometimes called a language selector/toggle) is announced clearly and accessibly by screen readers\u2014as well as relevant authoritative resources.\n\n---\n\n### What Announcement Should Include\n\nWhen a screen reader-focused user navigates to a language switcher, it should announce:\n\n1. **The control\u2019s role and purpose** \n For instance: *\u201cLanguage selector, collapsed, button\u201d* or *\u201cLanguage menu, 8 items, collapsed.\u201d*\n\n2. **Current state** \n If it\u2019s a toggle or expandable menu, use ARIA attributes like `aria-expanded=\"false\"` when collapsed, switching to `true` when expanded. The screen reader should reflect that: *\u201ccollapsed\u201d* or *\u201cexpanded\u201d*. \n The U.S. Web Design System does this well\u2014when tabbing into their language selector, it announces the label, the role (e.g. \u201cbutton\u201d), and whether it\u2019s collapsed or expanded. ([designsystem.digital.gov](https://designsystem.digital.gov/components/language-selector/accessibility-tests/?utm_source=openai))\n\n3. **Available choices labeled in their own language with correct language tags** \n Each option should be in the native language (e.g. *\u201cEspa\u00f1ol\u201d*, *\u201cDeutsch\u201d*, *\u201cFran\u00e7ais\u201d*) and marked using `lang=\"es\"`, `lang=\"de\"`, etc. That way, screen readers pronounce the option correctly even if the rest of the page is in another language. ([specification.website](https://specification.website/spec/i18n/language-switcher/?utm_source=openai))\n\n4. **Indication that selecting a choice will change the page language** \n Users need to understand the result of activating the switcher. The option itself should clearly reflect its effect, either via its name (native language) or via additional labeling or context. For example, in a two-language toggle, the inactive option might read *\u201cCymraeg\u201d* when the page is in English, with `lang=\"cy\"` applied. ([design-system.dwp.gov.uk](https://design-system.dwp.gov.uk/components/language-toggle/accessibility?utm_source=openai))\n\n---\n\n### ARIA / HTML Attributes & Markup\n\nTo achieve the announcements and behavior above, use:\n\n- `role=\"button\"` or `aria-haspopup=\"true\"` if it opens a menu.\n- `aria-expanded=\"false\"` / `true` to reflect open vs. closed state.\n- `aria-controls` to link toggle to the menu element (if applicable).\n- Use `lang` attribute on the `` element for the page\u2019s default language (Success Criterion WCAG 3.1.1) ([wcag.com](https://www.wcag.com/developers/3-1-1-language-of-a-page/?utm_source=openai)).\n- Use `lang` on each option in the switcher (e.g. `Fran\u00e7ais`) so screen readers pronounce correctly. ([designsystem.digital.gov](https://designsystem.digital.gov/components/language-selector/?utm_source=openai)).\n\n---\n\n### Example Pseudocode\n\n```html\n\n Languages\n\n\n```\n\nWhen focused:\n\n- Screen reader: **\u201cLanguages, button, collapsed\u201d**\n- After activating: **\u201cLanguages, button, expanded\u201d**\n- If navigating the list: **\u201cMenu, 3 items\u201d**, then options like **\u201cEspa\u00f1ol, link\u201d**, etc., read in their native pronunciation.\n\n---\n\n### Key WCAG Requirements\n\n- **WCAG 2.1 / 2.2 Success Criterion 3.1.1 (Language of Page)** \u2014 The default language of the page must be set correctly in code (the `` element). ([wcag.com](https://www.wcag.com/developers/3-1-1-language-of-a-page/?utm_source=openai)) \n- **WCAG 2.1 / 2.2 SC 3.1.2 (Language of Parts)** \u2014 Sections of text (or labels) in a different language must have the corresponding `lang` attribute. ([design-system.dwp.gov.uk](https://design-system.dwp.gov.uk/components/language-toggle/accessibility?utm_source=openai)) \n- **WCAG 2.1 SC 4.1.2 (Name, Role, Value)** \u2014 Interactive elements must have accessible names, roles, and states (like expanded/collapsed). ([designsystem.digital.gov](https://designsystem.digital.gov/components/language-selector/accessibility-tests/?utm_source=openai))\n\n---\n\n### Authoritative Resources\n\n- WCAG Guidelines (W3C) \u2014 for 3.1.1 and 3.1.2. ([wcag.com](https://www.wcag.com/developers/3-1-1-language-of-a-page/?utm_source=openai)) \n- U.S. Web Design System \u2014 practical examples of a language selector and screen-reader tests. ([designsystem.digital.gov](https://designsystem.digital.gov/components/language-selector/?utm_source=openai)) \n- DWP (UK Department for Work and Pensions) Design System \u2014 their guidance on English/Welsh toggle and use of `lang` attributes. ([design-system.dwp.gov.uk](https://design-system.dwp.gov.uk/components/language-toggle/accessibility?utm_source=openai)) \n- Specification Website: \u201cLanguage switcher\u201d \u2014 describes best practices for listing each locale in its own language and using correct markup. ([specification.website](https://specification.website/spec/i18n/language-switcher/?utm_source=openai)) \n\n---\n\nIf you like, I can send a checklist for testing a language switcher (voiceover, NVDA, etc.) or sample code in your framework. Do you want that?" } ]