Staging Review finding: Important instructions may 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: Veteran Facing Forms
Product: Direct Upload
Feature: Document Upload

Findings details

VA.gov Experience Standard - issue: User has 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 /upload, there's a paragraph that reads:

Note: After you upload your file, you’ll need to continue to the next screen to submit it. If you leave before you submit it, you’ll need to upload it again.

This text isn't programmatically associated with the file input, so a screen reader user who tabs straight to the input isn't likely to hear it. Since this is behavior that diverges from the norm for VA.gov forms (and contradicts the "we'll save your changes" message elsewhere in the form flow), it's important that screen reader users are aware of it.

Link, screenshot or steps to recreate

Recommended action

I think this is a pretty easy fix --- wrap the whole thing in a fieldset and place the "Your file" heading and the "Note" text in a legend for the fieldset, as you've done elsewhere in the form flow.

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

How did this touchpoint go? Give feedback on the Collaboration Cycle at any time.

• 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.

[jeana-adhoc]

@pennja -

We need to look at this a little differently. The fieldset needs to wrap all the way around the va-file-input component as well.

Currently the code is like this...

<fieldset>
  <legend> 
    h3... 
    description text 
  </legend>
</fieldset>

<va-file-input>

And it should be like this...

<fieldset>

  <legend> 
    h3... 
    description text 
  </legend>

  <va-file-input>

</fieldset>