Listboxes and Menus Structure Tests
Structure of listbox with options and expanding and static/open groups
- option one
- option two
- option three, in group one
- option four, in group one, uses aria-describedby to fake group affiliation
- option five, marked as checked
- option six, in group two, my label is overriden by using aria-label
- option seven, in group two, is disabled
Notes: Only options should take focus. Do not focus either the group or the (aria-hidden) group labels.
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 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 a full working implementation, the expandable group labels might be used as mouse click targets, but for keyboard (and screen reader users) on desktop, opening (and collapsing) of grouped items ought to occur as a result of up/down arrow key navigation within expandable groups, that is, do not require an additional user input for keyboard users to expand/collapse the expandable groups — the groups should expand when the user down arrows into the group.
Since mobile screen readers will not be causing focus changes when navigating through the list, the default should be to have the groups always expanded (no expand/collapse groups for mobile browsers).
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 works on all screen readers except iOS VoiceOver + Safari and Narrator + Edge. Narrator marks any option as
selected if it has tabindex=-1.
Summary: There is uneven browser/screen reader support for standards that should help with reporting of cardinality, group affiliation, and checked status. If consistent screen reader reporting of grouping, cardinality, and checked status is needed, the unfortunate state as of May 2020 is that using aria-label appears to be the only univerally supported mechanism.
Testing was performed with Talkback and Chrome, VoiceOver iOS and Mac with Safari, NVDA with Firefox, JAWS with Chrome, and Narrator with Edge.
Structure of menu with menuitems and subs that expand
- menu item one
- menu item two
- sub menu item one
- sub menu item two
- menu item four