Staging Review finding: Error message not announced to screen reader users

shiragoodman commented 2 weeks 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: Modernized Check-in Product: eCheck-in Feature: Mileage-only Travel Claim Submissions for VA Facilities that use Oracle Health EHR Software

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

On appointment-travel-claim/travel-review, if you click "File claim" without checking the "I confirm" checkbox, you get an inline error message on the checkbox, "You must accept the beneficiary travel agreement before continuing."

However, this error message isn't currently announced to screen reader users. If a screen reader user attempts to file without checking the box, nothing is announced. Without any visual cues, you've got to guess what happened. Did it work? Was there an error? Is this page just broken? etc.

Link, screenshot or steps to recreate

!["Beneficiary travel agreement" section, with an error message appearing inline with the checkbox confirming your agreement. The "File claim" and "Start over" buttons are just below this section, with a keyboard focus indicator visible around the "File claim" button.](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/platform/working-with-vsp/vsp-collaboration-cycle/staging-review-images/Brian-75013-3.png?raw=true) Steps to reproduce: 1. Use a test user to navigate through the travel claim flow until you reach the review page. 2. Activate a screen reader (easiest for testing with VoiceOver on Mac or NVDA on Windows). 3. Press [tab] until "File claim" has focus, and press [enter]. 4. Observe that nothing is announced to the user.

Recommended action

In the forms library when an inline error is triggered, keyboard focus is sent to the input that has the error. This ensures that the input, its state, and the error message are immediately announced to screen reader users, and puts keyboard focus in an actionable place to resolve the error. It would be great to match that behavior.

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.

loripusey commented 2 weeks ago

Hey team! Please add your planning poker estimate with Zenhub @brianseek @wullaski

wullaski commented 1 week ago

@loripusey this has been fixed and can be closed.

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