Staging Review finding: Card contents announced multiple times by screen reader after login

[shiragoodman]

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: Accredited Representation Management

Product: Appoint a Representative MVP + Representative Status Widget MVP Feature: Appoint a Representative MVP + Representative Status Widget MVP

Findings details

VA.gov Experience Standard - issue: User encounters unnecessary repetition or redundancy. VA.gov Experience Standard - category: Efficiency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

As a screen reader user when logging in to check if you have an accredited representatitive, focus goes straight to the "Your current accredited representative" card and the full contents of the card are then read out.

I think this is happening because the card both receives focus (tabindex="-1") and is in an aria-live region --- typically you would only need to use one of those.

Link, screenshot or steps to recreate

The card is currently coded as: ```

```

Recommended action

I don't think the aria-live and aria-atomic are necessary here, those could be safely removed. If possible, I'd also recommend setting focus to the card's H3 ("Your current accredited representative") rather than to the whole card itself.

The goal for setting focus here is to provide some wayfinding and context (you've successfully logged in, and now you're in the spot where you left off) rather than hitting the user with all of the information in the card all at once. Once the user knows where they are, they should be able to navigate to wherever they want to go on the page, eg. I don't want to listen to everything about my accredited rep, I just want to find the phone number.

If it's not possible to set focus to the H3, then focus on the H2 "Check if you already have an accredited representative" should be sufficient. That still drops the user in approximately the same place they were in prior to logging in.

References

• Accessibility Defect Severity: 3: Medium. Should be fixed in 1-3 sprints post-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.

[oddball-lindsay]

After talking with Governance in Staging Review, the approach could be:

1. Focus goes to the loading copy, while the card is loading
2. Focus then goes to the card's H3 ("Your current accredited representative"), once the card has loaded

We can chat with Brian if we're struggling to make the above ^ a reality.