Create an accessible language selector

Start with a visible language name. Flags alone can be ambiguous and their meaning depends on country rather than language.

Each language link receives:

  • lang for the language of its label;
  • hreflang for its destination;
  • rel="alternate";
  • aria-current="page" when an included list or link represents the current locale.

Flag emoji wrappers are hidden from assistive technology. Flag images have alternative text based on the language label. Pair either flag form with readable text.

Shortcode and floating dropdown toggles expose aria-haspopup="true" and an updated aria-expanded state. They respond to:

  • mouse or pointer activation;
  • Enter;
  • Space;
  • ArrowDown;
  • ArrowUp;
  • Escape.

Keyboard opening moves focus to the first enabled language. The included current-language menu entry is disabled and removed from the tab sequence.

Navigation-menu dropdowns use the theme's normal nested-menu markup. Their accessibility depends on the theme's menu implementation, so do not assume the shortcode script controls them.

Run a keyboard review

  1. Tab to the selector.
  2. Open it without a pointer.
  3. Confirm focus reaches a selectable locale.
  4. Move through the available links.
  5. Close it with Escape.
  6. Continue tabbing through the page.
  7. Repeat at 200% zoom and on the theme's mobile menu.

Also inspect the accessible name after applying custom markup. Decorative punctuation, an empty custom label, or a flag-only template can leave the link unclear even when the HTML is technically valid.

Disable comments by post type
Previous
Handle unavailable languages and selector fallbacks
Next