The aria-selected attribute in HTML is used to indicate the current state of a selectable listbox item or menu item for screen reader users. This document explains an observed discrepancy in how the aria-selected attribute is handled by Chromium-based browsers when interacting with listbox options and menu items, compared to other browsers.

The Issue

In multi-select listboxes or menus, when bringing focus to options that are not selected, screen readers in all browsers correctly announce their state (e.g., "Option A, not selected"). However, after an option is selected, the following behavior is observed:

• Chromium-based Browsers: When navigating up and down through the options, Chromium-based browsers (including Google Chrome, Microsoft Edge, and Brave) announce only the option's label (e.g., "Option A"). The "selected" state is not announced.
• Other Browsers (Safari, Firefox): Screen readers announce both the option's label and its selected state (e.g., "Option A, selected").

Root Cause

This behavior is specific to Chromium and its interaction with the aria-selected="true" property. There is an existing issue logged with Chromium for this incompatibility, indicating that Chromium-based browsers do not consistently announce the aria-selected state in the same way as other browsers. 

The listbox and menu items in question are structured semantically, adhering to WAI-ARIA Authoring Practices Guide (APG) recommendations.

Workarounds and Their Limitations

A potential workaround is to include the word "selected" as part of the option's label itself. However, this creates a new issue:

• Dual Readback in Other Browsers: Other browsers, which do correctly announce the aria-selected state, would then read the word "selected" twice (e.g., "Option A, selected, selected"), resulting in a poor user experience.

Our Current Approach

Despite the Chromium-based browsers' behavior, along with our current component enhancement of removing redundant readback using labels as part of the Infinity 25.1 release, listbox and menu items still provide a clear distinction between selected and non-selected states.

In Chromium-based browsers, when an option is not selected, the screen reader announces its "not selected" state. When the option is selected, the screen reader announces only the label. This difference in screen reader announcement announcement allows users to distinguish between the two states.

Conclusion

While Chromium-based browsers' handling of aria-selected differs from other browsers, the current design ensures that users can still effectively differentiate between selected and non-selected options. We are aware of the underlying Chromium issue and are monitoring its resolution. In the meantime, we believe that the current approach provides the best balance between accessibility and a consistent user experience across different browsers.