Staging Review finding: Screen reader users may miss some instructions in Blue Button form flow

[shiragoodman]

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

This ticket was part of a merged Staging Review with MHV Medical Records Download Records, Flow/Images and Settings

Product Information

Team: vfs-mhv-medical-records
Product: MHV Medical Records
Feature: Phase 1 Radiology Flow/Images, Download Records, and Settings

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: No
Design System review: No
Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When a screen reader user moves through a form flow, the expected behavior is that they will try to move through the form as efficiently as possible, eg. tabbing through the interactive elements rather than having their screen reader announce all of the content of the page. That means any content that's not programmatically associated with an interactive element is likely to be missed.

At multiple steps through the form flow, there's important information or context provided above the fields that's likely to be missed when a user tabs straight to the first input. Example: When selecting the types of records to include, the instruction "Select types of records to include" and the context provided "Date range: [range selected in previous step]" aren't announced. A screen reader user might be able to guess the instructions from the checkboxes and they may remember what they selected for the date range, but it's a bit more cognitive load than we require of sighted users.

Link, screenshot or steps to recreate

Recommended action

Easy solution for whenever you have relevant helper text or instruction text --- wrap the whole thing in a fieldset and include all the helper text in a legend. Example:

<fieldset>
   <legend>
      <h3 class="some-class">Select types of records to include</h3>
      <span class="some-other-class">Date range: Last 12 months (Date to Date)</span>
   </legend>
   <va-checkbox-group ... />
</fieldset>

You can style the contents of the legend however you'd like, so only the heading looks legend-y and the rest looks as intended. But by including it all in the legend for that fieldset, that content will be announced when you tab into the first checkbox.

You don't have to do this for all helper text, just helper text that's critical for understanding the expected user interaction. But I'd recommend leaning toward including more rather than less, since this is a form flow that users probably aren't going to be going through frequently and won't have a chance to build a lot of intuition for it.

References

• Accessibility Defect Severity: N/A
• WCAG Success Criteria: N/A
• Modality: N/A
• 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.