Tree-based Select Widget Implementation Example

A link that doesn't go anywhere, after the widget, as an anchor to test tabbing through or out of the widget.

Testing Results and Commentary

Note on Windows High Contrast Mode (HC): To make selections more visually distinct when HC is enabled, an underline displays. We ensure icon visibility by setting forced-color-adjust: auto in the SVG style attribute and setting the property fill='currentColor' on the path.

Environment: Testing conducted May, 2022. All technologies evaluated at most recently released versions.

Summary: Tree has strong support across screen readers, with only a few non-optimal behaviors, as noted in the screen reader + browser pairing listed below. The single exception is macOS VoiceOver, which incorrectly reports the tree as a table structure. If there is a need for a select-style menu where the “groups” must be collapsible, a tree implementation would provide a solid experience, with the exception that the mobile screen readers tend not to report cardinality and lean on aria-describedby for signifying group affiliation. Even with these limitations, the widget would be comprehensible and usable for most proficient screen reader users, barring the exeption of unusable performance encountered with macOS VoiceOver. Because of Mac VoiceOver's unacceptable performance, the tree-based implementation should not be used in production.

Note: If this widget were used along with a dynamic search, an appropriate aria-live announcement of number of results returned would be something like “X selectable items, in Y groups.” It would be ideal to have all selectable items be at level two, nested within a group. That way, when the user entered the tree they would immediately be oriented by hearing the number of groups (all of the expandable tree items at level one).

• NVDA + Firefox: Cardinality, group associations (via aria-describedby associations and announcement that you are in a named grouping), levels of nesting, collapsed and expanded states, and selection are all announced as expected. No navigation issues encountered.
• Narrator + Edge: Narrator does not automatically switch between “scan mode” on (like browse mode/virtual PC cursor mode) and scan mode off (pass-through/forms mode/PC cursor mode off). It apparently does not dynamically recognize and mode toggle for widget roles, like NVDA and JAWS do. So for proper, behavior, it is necessary to turn scan mode off (via Narrator + Spacebar), though widget works satisfactorily without having to manually mode switch.
• JAWS + Chrome: Announces button as collapsed menu and properly announces all labels. When entered, we hear this is a tree view and are told to use arrow keys to navigate (hence the necessity of wiring up expand and collapse to arrows). Rather than announcing collapsed/expanded, JAWS reports “closed”/“open.” Hard-coded cardinality is properly announced. There is no announcement of the aria-describedby group associations nor do we know we are in a group. However, the level is announced (level 2 in code is announced as level 1, but this allows for understanding of nested structure) and cardinality for the groups is also correct. This makes group affiliation comprehensible, even if not explicit.
• Android Talkback + Chrome: Items are announced as tree items. No announcement of cardinality. No levels or groupings get announced, but the aria-describedby associations of the groups are announced. So group affiliation is explicit. Like in iOS + VoiceOver, it is possible to walk off the bottom of the tree. The entirety of the tree takes screen reader focus and has its name and role announced when you move off or or into it. This helps the Talkback user understand the boundaries of the tree. Items are correctly announced as “selected.”
• iOS VoiceOver + Safari: Announces the button as having a menu with a pop-up. Like Android Talkback, there is no announcement of levels or of cardinaltiy. Boundaries of the widget are announced by “tree start” and “tree end.” We hear expanded and collapsed state of tree group buttons, but there is no annoucnement of aria-describedby associations.
• Mac VoiceOver + Safari: Trigger is announced as a menu popup button. This is a desired outcome. But once in the tree, VO announces as a table (and does not tell you how many rows there are). Also, the expanding tree items' states are not announced until interacted with, then they get the "row [cardinality] collapsed" "row [cardinaltiy] expanded" announcement. There is no other cardinaltiy announced ever and there is no reporting of nesting, even the grouping via aria-describedby does not announce. A completely broken experience. (VoiceOver, at least when tested with this version of the OS, treats as a table both a "tree" and a "treegrid," which should get a row and column announcement, since a grid analogizes to a table. In other words, Mac VO has a bug that would make most tree-based widgets unusable.)