Staging Review finding: No screen reader announcements when using buttons or links

shiragoodman commented 1 month ago

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: VA BTSSS - Travel Pay Product: Travel Pay Feature: MVP

Findings details

VA.gov Experience Standard - issue: User doesn't have enough information to complete a task. VA.gov Experience Standard - category: Comprehension Launch-blocking: Yes Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

There are multiple instances on the page where selecting a button or a link results in a change to page content but no announcement is made to screen reader users to indicate that something has happened.

In a "traditional" HTML page (think the web of the 1990s), following a link or clicking a button to submit a form would result in the browser loading a new page or reloading the current page. That loading status is passed via the accessibility API to screen readers, prompting the screen reader to begin reading the new document from the top.

But in the world of React apps and single-page applications in general, the page doesn't reload --- meaning that there's nothing communicated to screen readers by default telling them to start reading again. Unless you take the proactive step of programmatically providing some kind of announcement that something has changed on the page, following a link or activating a button doesn't result in any announcement made to screen reader users.

When a user selects a button and hears nothing, they're left to guess: Did it work, or is it broken? Did I press the wrong key on accident? Should I try pressing Enter again, or will that do something I don't want it to do? Am I still in the same place, or have I been moved somewhere else? This can be a pretty frustrating experience.

Interactions on /my-health/travel-claim-status where content changes but no announcement is made to screen reader users:

Sort button
Apply filters button
Reset search button
Each pagination link (Previous, Next, and each number)

Link, screenshot or steps to recreate

Steps to reproduce: 1. Navigate to [/my-health/travel-claim-status](https://staging.va.gov/my-health/travel-claim-status) and log in with the test user. 2. Activate a screen reader (recommend NVDA on Windows or VoiceOver on Mac for easy testing). 3. Press [tab] until focus moves to the "Show appointments in this order" `select`. 4. Press the down arrow key to select Oldest. 5. Press [tab] to move focus to the Sort button. 6. Press [enter] to activate the button. Note that content on the page has changed but the screen reader did not make any announcements.

Recommended action

The easiest way to provide an announcement to screen reader users --- and the one that we typically prefer on VA.gov --- is to set keyboard focus when the content change occurs (.focus() to focus the element, with tabindex="-1" to make non-interactive elements focusable). The element that receives focus is immediately announced by the screen reader, providing some confirmation that something has happened.

Typically, you want to send focus to an element where what's announced provides useful information to the user and sets them up for the next appropriate action. For example, following a pagination link should send focus to the "Showing X - Y of Z" text above the results. That implicitly tells the user that they've successfully moved to that page of the results, and explicitly tells them what's now on the page. And since keyboard focus is now above the results themselves, telling your screen reader to announce the page starting from that point will announce those results (without having to navigate anywhere else to find the results).

References

Accessibility Defect Severity: 1: Critical. Must be fixed before launch.
WCAG Success Criteria: N/A
Modality: Screen reader
Design System Component: N/A
Design System Pattern or Template: N/A
Design System Foundation: N/A
Content Style Guide: N/A
Context: N/A

Next Steps for the VFS Team

[ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
[ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
[ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

kjduensing commented 1 month ago

@briandeconinck In trying to fix this issue, I noticed that the cards on our page are not being read by the screen reader I'm using. I can work around this by setting tabIndex=0 on those components, but I'm reading that I shouldn't have to do that. If I don't do that, I'm having trouble getting the screen reader to read each card as the user tabs through them.

What are your thoughts on this?

shiragoodman commented 3 weeks ago

Hey @kjduensing -sorry, @briandeconinck has been out sick. Would you still like Brian's input? I can ask him to take a look at this when he's back in the office tomorrow.

kjduensing commented 3 weeks ago

No worries Shira, thanks for getting back! A colleague of Brian's reached out to help, so we're all squared away.

department-of-veterans-affairs / va.gov-team