Staging Review finding: "Check in now" links not announced the same way by screen readers

shiragoodman commented 3 months 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: Pre-Check-in & eCheck-in Feature: New Landing page design

Findings details

VA.gov Experience Standard - issue: User is uncertain where a button or link leads. VA.gov Experience Standard - category: Comprehension Launch-blocking: Yes Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

On /appointment-check-in/appointments, there are two "Check in now" links --- one in the "What to do next" card and one in the "Today's appointments" calendar.

In each place, I am assuming from context that it's possible for more than one appointment to be listed. In the "What to do next" card, the "Check in now" link has an aria-label to clearly identify which appointment you're checking in for. But in the "Today's appointments" section, there's no aria-label on the link.

This could be confusing to screen reader users, who may interpret these links as serving different functions (eg. "check in for the next appointment" and "check in for all of today's appointments").

Link, screenshot or steps to recreate

``` Check in now ``` versus ``` ```

Recommended action

I think the context given by the aria-label makes sense here and would be useful for both of these links. Note that the va-link component supports aria-label via the label prop.

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.