Language Switcher

Navigation

Overview

The language control is a button that control a listbox to change the language of the page.

Open it, move with the arrow keys, Home and End, choose with Enter, close with Escape.

The trigger announces the current language and what to do to change it ("The current language is English. Click to change language"). It has and aria-haspopup="listbox" to associate it with its listbox and aria-expanded, and is at least 44px.
Options are role="option" with aria-selected. The selected one has an accent bar on its inline start, a secondary ground and a check.
Each option shows the name in its own language. Set lang on the page when it changes.
The listbox heading is a Label: "Select language". Escape closes it and returns focus to the trigger.

Enter, Space or ArrowDown on the trigger opens the menu, and focus goes to the selected language.
ArrowDown and ArrowUp move between the options and wrap from the last to the first and back. Home and End go to the first and the last interactive elements.
Enter or Space on an option chooses it: the menu closes, focus returns to the trigger and the trigger shows the new language.
Escape closes the menu and returns focus to the trigger.
Shift+Tab from the first option closes the menu and returns focus to the trigger. Tab from the last option closes it and goes on to the next control in the focus flow of the page.
Hovering an option moves focus to it, and a press outside the menu closes it.

Opening is announced politely, in a live region: "Language menu opened. 3 options available." Choosing a language is announced the same way: "Language changed to Español".

This section is still in progress.

This section is still in progress.