Staging Review finding: Instructions likely to be missed by screen reader 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: Employee Experience Team
Product: 21-526EZ
Feature: Max CFI

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

On /disabilities/rated-disabilities, screen reader users are unlikely to hear the instructions for what to do on the page.

In a form flow like this (especially multiple pages into a form), the typical screen reader user is probably not going to have their computer announce the whole page from start to finish. Instead, they're more likely to press [tab] to move between each interactive element and complete each input based on what's announced at each tab stop. That means that any text on the page that's not programmatically associated with an input is likely to be skipped over, even if the page itself is techically accessible.

As currently coded, the checkboxes are grouped inside a fieldset with a legend of "Rated Disabilities." The first time you tab to a checkbox, your screen reader will announce something like: "Rated Disabilities, Scars, Head, Face Or Neck" and then each subsequent checkbox will only announce its label.

But the instruction text "Below are your rated disabilities. Please choose the disability you're filing for..." won't be announced, even though that paragraph falls inside the fieldset. If the text isn't important for completing the task, it's not a big deal. From context, most users will probably be able to figure out what the intent of the page is. But the actual instruction of what to do --- "choose the disability" --- is still likely going to be missed by most screen reader users. Generally bad form to make users have to guess what they're supposed to do!

Link, screenshot or steps to recreate

Steps to reproduce:

1. Log into staging using test user +276.
2. Navigate through the 526ez flow to the Rated Disabilities page.
3. Activate a screen reader. Quickest testing is with VoiceOver on Mac or NVDA on Windows (but JAWS is great too if you have a license)
4. Press [tab] to move focus to the first checkbox.
5. Note that your computer announces "Rated Disabilities" and the checkbox label, but does not announce the instruction text that comes between the legend and the first checkbox.

Recommended action

The best solution we've got here is to put the instruction inside the legend and style it to make it visually match plain text on the page, something like:

<fieldset>
	<legend>
		<span class="some-class">Rated Disabiliites</span>
		<span class="some-other-class">Below are your rated disabilities. Please choose the disability you're filing for increased compensation because it has gotten worse.</span>
	</legend>
	[... checkboxes ...]
</fieldset>

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.