Screen Reader User: Button navigation inconsistent

[joestegman425]

From Applause:

Prerequisites:

1. Using Windows + Edge browser Add 'Accessibility insights' for web chrome extension
   from the given URL: https://accessibilityinsights.io/downloads/
2. Open the URL, https://www.washington.edu/accesscomputing/AU/before.html
3. Turn on the JAWS screen reader

Steps:

1. Once 'Accessible university' home page opens, launch 'Accessibility insights' and Load the
   website using the extension.
2. Now press the tab key to focus on the 'Quick assess' links and press enter key to activate
3. Once the 'Quick assess' page opens, Use the Tab key to focus on the 'Landmark' menu button
   available in the header region and press enter key to activate
   4.Once 'Landmark' page opens, press the tab key to focus on the 'Save assessment' control
   available in the header region
4. Make note of the JAWS screen reader announcement

Participant Experienced:
"Save assessment" is implemented as a link, causing it to be missed by users navigating through buttons with a screen reader.

Participant Expected:
'Save assessment' is an interactive element that is working as a button (as it is just opening
a 'Save assessment' dialog), so it should be announced as a button.
Expected announcement: 'Save assessment', button

[joestegman425]

Recommendation:
Give “Save assessment” a role of "button".

[joestegman425]

I reviewed with a SME (Scott) and we aligned on the best fix is to ensure the all 4 logical buttons *see screenshot) are wrapped in a group (ul with child li), but the visual UX should not change from the current UX. The end-result is a screen reader user, when navigating by "Button", will know they jumped into a group of 4 elements and should be able to find the "Load assessment" link from there.

[Export results] [Save assessment] [Load assessment] [Start over]