* - Widget - Language selector - Language Selection Mechanism Not Clearly Indicated or Accessible

What the issue is

When websites offer content in multiple languages, the mechanism to select a preferred language may not be clearly indicated or accessible through keyboard navigation and screen readers. This can include language selection options without proper semantic markup or aria-labels, as well as visual indicators that do not meet color contrast requirements or are not visible to screen reader users.

The selector may also be poorly positioned on the page so that it is not quickly or easily found by users of screen-readers or screen-magnifiers who require the language selector to be very lose to the beginning of the page (if not at the beginning) as that is where they are first brought by their assistive technologies.

The selector may also be poorly thought through for users who use voice input/voice navigation who need to tell their technology what to "click" on the page to interact with the selector. For example if the language options are shown as capitalized two-letter abbreviations they must deal with telling their voice input to expect an abbreviation, and that abbreviation will beed to be marked up in the appropriate language.

Why this is important

Providing a clear and accessible language selection mechanism is pivotal for users to access content in their preferred language. This is especially critical for users with cognitive disabilities who may find complex navigation structures confusing, or for users who rely on assistive technologies to interact with web content. Meeting these needs supports inclusivity and ensures that all users have equal access to information in their language of choice.

Who it affects

This issue primarily affects:

  1. Users with cognitive disabilities who benefit from straightforward navigation mechanisms.
  2. Screen reader users and those relying on keyboard navigation who require accessible controls to switch languages.
  3. Users with visual impairments who need high contrast visual cues to locate and operate the language selection mechanism.

How to remediate the issue

  1. Ensure language selection controls are keyboard accessible and can be navigated to and operated with both a screen reader and voice navigation.
  2. Use semantic HTML for controls (such as <button> elements for clickable actions) and proper ARIA roles and properties where necessary.
  3. Provide clear visual cues for the language selection mechanism that meet or exceed WCAG color contrast requirements.
  4. Place the language selection near the top of the page to make it easily discoverable.
  5. Test the language selection feature with a variety of users, including those who use assistive technologies, to ensure it is intuitive and accessible to all.