Staging Review finding: `aria-labelledby` on "Review your information now" may block voice users.

[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: Modernized Check-in Product: Pre-Check-in & eCheck-in Feature: New Landing page design

Findings details

VA.gov Experience Standard - issue: User can't complete a necessary flow or hits a dead end. VA.gov Experience Standard - category: Usability Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

On /appointment-pre-check-in/appointments, the "Review your information now" link has an aria-labelledby that points to the H3 heading on the card. This announces the link as identical to the heading: "Review your contact information for your [day, month, date, year, time] appointment."

For sighted voice command users (eg. Dragon NaturallySpeaking on Windows, Apple Voice Control on iOS or Mac, etc.), the common interaction pattern goes:

• Read visible link text, "Review your information now"
• Speak command, "Click Review your information now"
• Link is clicked.

But voice command software looks for matches in the accessibility tree, where the aria-labelledby replaces the visible link text. When the link name in the accessibility tree is close to what's spoken, there's a decent chance of a partial match --- especially if what's spoken is word-for-word included in the name in the accessibility tree. But I think this is enough of a divergence here that most software wouldn't give you a match. (Tested with Dragon, was not able to get a match, and Dragon tends to be one of the better ones for this.)

There are usually other mechanisms available for clicking a link for voice command users, but this is a point of friction that should be easy to smooth out.

Link, screenshot or steps to recreate


Recommended action

It's unclear from testing if users will ever have more than one appointment listed here. If not, no ARIA is needed --- if there's only ever one "Review your information now" link, no need to add anything extra to differentiate it from other identical links.

If you can have more than one appointment (which I'm assuming is true?) then I would recommend something like this instead:

<a data-testid="action-link" class="vads-c-action-link--green" href="/" aria-label="Review your information now for Saturday, July 20 8:30 a.m. appointment">Review your information now</a>

Or something similar, that uses date/time to differentiate it from other appointments. If appointments are always on the same day, you can probably drop the date and just do time.

References

• Accessibility Defect Severity: 2: High. Should be fixed in 1-2 sprints post-launch.
• WCAG Success Criteria: N/A
• Modality: Voice
• 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]

Please add your planning poker estimate with Zenhub @brianseek

[brianseek]

This is ready to validate @loripusey @benbrasso-agile6 @zach-park @cgednalske its making its way to stage/prod now but can also been seen locally or in the following screenshot:

[benbrasso-agile6]

Screenshot being silly and not loading for me

[brianseek]

@benbrasso-agile6 try again, I think it was zenhub shenanigans

[benbrasso-agile6]

If I'm understanding the ticket, that's a screenshot for multiple appts for pre check in payload and therefore LGTM.

[loripusey]

LGTM closing