Basic secondary actions test page
This example is not yet a usability study, it contains trees and tabs with secondary actions and basic support testing results.
Versions tested:
- JAWS 2020.2004.66
- NVDA 2020.1
- Narrator on Windows 10 19042
- VoiceOver on iOS 14.4
- VoiceOver on macOS 10.15.7
- Talkback on Android 10
- Chrome 88
- Firefox 86
- Edge 89
- Safari 14.0.1
Trees
Plain tree
Just a normal tree to set a baseline of support
Tree with buttons inside treeitems
Tree with buttons adjacent to treeitems
Results
Screen reader/Browser | Baseline: virtual cursor | Baseline: app mode | Nested: virtual cursor | Nested: tabbing | Adjacent: virtual cursor | Adjacent: tabbing | Notes |
---|---|---|---|---|---|---|---|
JAWS/Chrome | Pass | Pass | Fail | Fail | Fail | Fail | (Note): someone else reported that JAWS 2021 handled the secondary buttons OK when tabbing. I don't have 2021 yet, so another tester would be appreciated (/Note). All tree interactions worked as expected, but secondary buttons did not announce name and role in either case. VPC didn't find them, and tab announced them as if they were one level down and had no name or role. |
JAWS/Firefox | Pass | Pass | Fail | Fail | Fail | Fail | Same as JAWS/Chrome |
NVDA/Chrome | Fail | Pass | N/A | Pass | N/A | Pass | Auto switches to browse mode when tabbing to buttons in both examples. Both work OK otherwise. Browse mode only interacts with first item + descendants in all trees. |
NVDA/Firefox | Fail | Pass | N/A | Pass | N/A | Pass | Same as chrome/td> |
Narrator/Edge | Pass | Pass | Pass | Pass | Pass | Pass | Auto-mode switching is buggy for unrelated reasons, so couldn't be tested. Tabbing works as expected in both examples. |
VoiceOver/macOS Safari | Fail | Fail | N/A | N/A | N/A | N/A | VoiceOver on macOS does not recognize or handle trees with cursor navigation or tabbing. Tabbing exposes names, but incorrect roles and no state info. All trees work equally well with tabbing (that is, it isn't the buttons that are the issue). |
VoiceOver/iOS Safari | Partial | N/A | Pass | N/A | Pass | N/A | Didn't test iPhone + keyboard; Base tree works OK, but doesn't include level/index info. Buttons in both examples work OK, though adjacent buttons include the expand/collapse information of their parent. |
Talkback/Chrome | Pass | N/A | Pass | N/A | Pass | N/A | Didn't test android + keyboard; baseline tree also doesn't include level/index info, focus does not follow cursor. Buttons were reachable and worked in both examples. |
Tabs
Plain tabs
some example html content
some example CSS content
some example JSON content
Closeable tabs with nested buttons
some example html content
some example CSS content
some example JSON content
Closeable tabs with adjacent buttons
some example html content
some example CSS content
some example JSON content
Results
Screen reader/Browser | Baseline: virtual cursor | Baseline: app mode | Nested: virtual cursor | Nested: tabbing | Adjacent: virtual cursor | Adjacent: tabbing | Notes |
---|---|---|---|---|---|---|---|
JAWS/Chrome | Pass | Pass | Fail | Fail | Pass | Pass | Tabbing to a nested button reads it as the parent tab, and passes events to the parent tab (even though it works without JAWS). Tabbing to an adjacent button auto-switches to VPC (if enabled), but otherwise works. |
JAWS/Firefox | Pass | Pass | Fail | Fail | Pass | Pass | Same as JAWS/Chrome |
NVDA/Chrome | Pass | Pass | Fail | Pass | Pass | Pass | Mode auto-switches to browse for adjacent buttons, but not for nested buttons. Tabbing works for both. |
NVDA/Firefox | Pass | Pass | Fail | Pass | Pass | Pass | Same as Chrome |
Narrator/Edge | Pass | Pass | Pass | Pass | Pass | Pass | Auto-mode switching is buggy for unrelated reasons, so couldn't be tested. Tabbing works as expected in both examples. |
VoiceOver/macOS Safari | Pass | Pass | Fail | Fail | Pass | Pass | Neither tabbing nor cursor works for nested buttons, but both work for adjacent buttons. |
VoiceOver/iOS Safari | Pass | N/A | Fail | N/A | Pass | N/A | Nested buttons interfered with basic tab functionality (they weren't separately reachable, and double tab triggered nested button instead of tab). Adjacent buttons worked OK. |
Talkback/Chrome | Pass | N/A | Pass | N/A | Pass | N/A | Both nested and adjacent buttons worked as expected. |
Listboxes
Normal listbox
Listbox with nested buttons
Listbox with buttons adjacent to options
Results
Screen reader/Browser | Baseline: virtual cursor | Baseline: app mode | Nested: virtual cursor | Nested: tabbing | Adjacent: virtual cursor | Adjacent: tabbing | Notes |
---|---|---|---|---|---|---|---|
JAWS/Chrome | Pass | Pass | Fail | Pass | Fail | Pass | Supports grouping, works surprisingly well tabbing both nested and adjacent buttons. No issues with mode switching or accname. VPC does not find close button in either example (not surprising since it surfaces the listbox as a whole). |
JAWS/Firefox | Pass | Pass | Fail | Pass | Fail | Pass | Same as Chrome |
NVDA/Chrome | Fail | Pass | N/A | Pass | N/A | Pass | Supports grouping, but browse mode only navigates first group for all examples. Mode auto-switches when tabbing to the button in both examples. Otherwise both work as expected. |
NVDA/Firefox | Fail | Pass | N/A | Pass | N/A | Pass | Same as Chrome. |
Narrator/Edge | Partial | Pass | Pass | Pass | Pass | Pass | Groups supported. Narrator doesn't navigate to listboxes with the form field shortcut. Otherwise scan mode reaches all buttons. Tabbing works as expected. |
VoiceOver/macOS Safari | Fail | Fail | Fail | Fail | Partial | Partial | Something about the markup of this listbox, or VoiceOver + listboxes in general didn't work. Listbox options were not read, independent of the buttons. Nested buttons were completely unreachable, though adjacent buttons were reachable and read correctly using both quicknav and tabbing. |
VoiceOver/iOS Safari | Partial | N/A | Fail | N/A | Pass | N/A | VO on iOS doesn't recognize a basic listbox as a form control w/ quick nav, but otherwise works OK. Nested buttons are unreachable, but don't interfere with listbox functionality. Adjacent buttons work. |
Talkback/Chrome | Pass-ish | N/A | Pass | N/A | Pass | N/A | Basic example reads incorrect index/total info (perhaps b/c of groups, which are not otherwise supported). Buttons in both examples are reachable and work as expected. |