Listboxes and Menus Structure Tests

Example Implementation 1: Structure of listbox with options and expanding and static/open groups

Example Implementation 2: Structure of listbox with options and expanding and static/open groups

We have a working implementation of this, for testing purposes.

Results and Commentary (2020)

Most screen readers correctly report the number of options and position with the set of options (due to usage of aria-posinset and aria-setsize?); however, when testing in 2020, JAWS fails to report proper cardinality on the nested options, and all mobile screen reader/browser combos report no cardinality.

Only NVDA correctly reports the expanded state of the expandable/aria-expanded group, in the first example. But aria-expanded is not valid for groups or for options; hence the approach taken in the second implementation.

All tested desktop combinations of screen readers correctly reported the name of the group when focusing an option within a group. aria-describedby can be used on Android with Talkback and Chrome to fake a group affiliation. There is no adequate technique for doing this with iOS VoiceOver and Safari.

Using aria-checked to check an option is probably a non-optimal choice. Options can be selected but not checked.

Testing was performed with Talkback and Chrome, VoiceOver iOS and Mac with Safari, NVDA with Firefox, JAWS with Chrome, and Narrator with Edge.

Extra: Structure of menu with menuitems and subs that expand