Staging Review finding: Print and Cancel actions not easily discovered when navigating by heading

[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: Appointments Product: Appointments Feature: Appointment Details Redesign

Findings details

VA.gov Experience Standard - issue: User can't determine next steps in a flow. VA.gov Experience Standard - category: Findability Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

One of the common ways screen reader users navigate a page is by heading, skipping directly to the section of content whose heading sounds like a match for what they're trying to accomplish.

The buttons at the bottom of the appointment details (eg. "Print" and "Cancel request" on a pending appointment") fall under a heading that doesn't really describe them, which makes them harder to find. In other words, if I'm trying to find where I cancel my requested appointment and I'm looking for a heading that will put me in the right part of the page, I'm probably not going to guess that "Your contact details" is the right one to skip to.

This came up in the Design Intent, and looking back at that feedback ticket I see that @Cieramaddox asked a follow-up question that I completely missed. I'm so sorry for dropping the ball there!

Recommended action

I recommend adding an H2 heading before the buttons --- something like "Other actions" or "Appointment actions," or even just "Print and cancel" to be really explicit. Making that heading screen reader only text using the sr-only class is totally fine here, so no visual changes are needed.

References

• Accessibility Defect Severity: 2: High. Should be fixed in 1-2 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.

[outerpress]

@Cieramaddox @laurwill I'm leaning toward adding a heading we display on the page. I think it'll help clarify that section.

Either way, I'm struggling with what to call that section:

"Other actions" feels like it's broad enough to work:

• There should always be a print button/one action
• The weird part is when there's no cancel button - just a note that you have to call to cancel. So it's an action, but you can't do it online. But maybe that's fine.

Thoughts? Are there any other health tools with a similar setup we could crib from?

[outerpress]

Talked about this at the SME sync on Tuesday and agreed on "Other actions" @ldelacosta I'll put together a design ticket for this. We might need to adjust the alerts if you can't schedule for this work.

[outerpress]

Design ticket #88859