Midpoint Review - Accessibility Feedback - IVC Forms, 10-7959f-2, Foreign Medical Program Claim Cover Sheet

[briandeconinck]

Next Steps for the VFS team

• [ ] Assign this ticket to the team member(s) responsible for addressing feedback provided by Platform.
• [ ] Comment on this ticket:
  • If the Platform reviewer has any Thoughts/Questions that require responses.
  • When Must feedback has been incorporated. As appropriate, link to any other GitHub issues or PRs related to this feedback.
  • When Should/Consider feedback has been incorporated, or if any feedback will not be addressed. As appropriate, link to any other GitHub issues or PRs related to this feedback.
• [ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members.
• [ ] Close the ticket when all feedback has been addressed.

Thoughts/questions

• This looks pretty good! No major concerns, just a few little notes.
• Sorry for the delayed feedback, and thank you for your patience!

Feedback

Practice areas will document their feedback on the VFS-provided artifacts following the Must, Should, and Consider Framework. Platform Governance reviewers may also provide additional notes that don’t comment on the artifacts themselves but are important for implementation (eg. engineering/coding notes).

• [ ] Must: Echoing Erin's IA feedback, make sure the file uploads have a label (should be part of the component).
• [ ] Must: When multiple files are uploaded, the delete buttons will each need an aria-label to give them unique accessible names --- same deal as the edit buttons on the review page, which were annotated to indicate this. I think aria-label="Delete [filename]" makes sense, but aria-label="Delete [i]" with an index would be sufficient.
• [ ] Must: Echoing Erin one more time -- whenever you have a link that takes you out of the form flow (eg. "Find out which documents you need"), it probably makes sense to open in a new tab. If it does open in a new tab, add "(opens in a new tab)" to the link text.
• [ ] Consider: On the payment page, consider using the tile variation of the radio button component, which allow you to include helper text for each option. That might give you some options to trim the intro content and put it in context with the options themselves.
• [ ] Engineering note: There are a few points where you have helper text that's annotated to be associated via aria-describedby. That's fine, but I'd encourage exploring using a fieldset/legend pattern instead, eg.

  <fieldset>
    <legend>
       <h3>Phone and email address</h3>
       <span class="make-it-look-like-regular-text">Please include this information...</span>
    </legend>
    [all of the inputs]
  </fieldset>

  That pattern (1) avoids aria-describedby, which may be skipped for JAWS users who have personalized their verbosity settings, and (2) should ensure the helper text is announced once when tabbing into the fieldset, as opposed to being added to the end of all of the inputs in the fieldset. Not a must, but might be a pattern to try.

Governance team actions

• [x] Format feedback as individual tasks (check boxes)
• [ ] Assign this ticket to the VFS team member that opened the Slack request
• [x] Add the VFS team product label
• [x] Add the VFS team the feature label (if applicable)
• [x] Add the touchpoint labels
• [x] Add the practice area labels
• [x] Add the Collaboration Cycle initiative milestone

[brian-wilke]

Moving this to In Progress for this sprint

[brian-wilke]

@rachaelpenfil and @reiting, I may need some guidance to know if the figma is correct at this point. I think some of these are A11y annotations on top of the layout.

[rachaelpenfil]

I updated the annotations. I didn't include the annotation for the file upload , since it's part of the component. @reiting let me know if you have any questions about that.

[reiting]

@marywang2 This all looks good to me! I think we can move it to done probably.