Closed shiragoodman closed 3 weeks 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?
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.
No worries Shira, thanks for getting back! A colleague of Brian's reached out to help, so we're all squared away.
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:
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, withtabindex="-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
Next Steps for the VFS Team
@platform-governance-team-members
with any questions or to get help validating the issue.@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.