Listboxes and Menus Structure Tests

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

• option one
• option two
• group one, expandable
  • option three, in group one
  • option four, in group one, uses aria-describedby to fake group affiliation
• option five, marked as checked
• group two, static open
  • option six, in group two, my label is overriden by using aria-label
  • option seven, in group two, is disabled

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

• option one
• option two
• group one (is expanded)
  • option three, in group one
  • option four, in group one, uses aria-describedby to fake group affiliation
• option five, marked as selected
• group two, always open
  • option six, in group two, my label is overriden by using aria-label
  • option seven, in group two, is disabled

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

• menu item one
• menu item two
• menu item three, expanded with popup
  • sub menu item one
  • sub menu item two
• menu item four