Staging Review finding: Contact info phantom alerts announced by some screen readers

[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: Benefits Decision Review Product: Higher Level Review

Feature:

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

When I land on the Contact Information page when testing with NVDA, I'm hearing "Alert" announced a few times even when no alert is present. I believe (but haven't verified) that it has to do with the role="alert" on the success alert while the success alert also has visible="true".

This doesn't prevent anyone form completing a task, but a screen reader user might be confused by the "alert" announcement without any content on the page that feels alert-y.

Link, screenshot or steps to recreate

https://github.com/user-attachments/assets/8ae9d7b3-0dfd-4737-af4f-0cda3343b9f3

Recommended action

Putting ARIA attributes on web components when they aren't defined as props for the component can sometimes result in odd behavior, and since role="alert" maps to an aria-live region, I'm guessing something is going on along those lines. I think the intention behind including the role="alert" makes sense here (avoiding needing to do additional focus management), but I think it needs some additional testing.

No specific recommendation, except to revisit how you're handling the alerts on this page and/or to follow up with the Design System Team if there need to be changes to the component.

References

• Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
• WCAG Success Criteria: N/A
• Modality: Screen reader
• Design System Component: Alert
• 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.

[davidakennedy]

@Mottie and I chatted about this today, and I tested it. A few notes:

• The three alert announcements only happen in Chrome with NVDA. It doesn't happen in Safari with VoiceOver or in NVDA with Firefix, which is the recommended pairing for NVDA.
• @Mottie and I think this is happening because of the role="alert" on the three success alerts for updates made on this page.

We're going to remove the role="alert" on each success alert. We're currently managing focus to the alert container. Instead, we'll move focus to the message paragraph. This way, the unwanted announcements should stop in Chrome with NVDA, and Veterans should still hear the messages when needed.