Midpoint Review - Accessibility Feedback - Modernized Check-in, eCheck-in, Mileage-only Travel Claim Submissions for VA Facilities that use Oracle Health EHR Software

[briandeconinck]

Next Steps for the VFS team

• [x] 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.
• [x] Close the ticket when all feedback has been addressed.

Thoughts/questions

-

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

• [ ] Engineering/Coding notes: My only concern here is around some of the helper text that's not clearly part of an input label or a heading that would receive focus. Example: On "Select the appointments you want to file for today," I'm looking at the helper text "If you’re filing only mileage and no other expenses, you can file all your claims right now for today’s appointments. You’ll need to file separate claims for any appointments that you don’t select." That helper text seems important (provides context for deciding what to claim when), so we want to make sure it's passed along to screen reader users.

  With a mobile screen reader you use gesture controls to move through the page, swiping through both interactive and non-interactive elements. Mobile screen reader users are likely to hear the helper text as they swipe through, so no problem there. On desktop, screen reader users might go through this workflow using forms mode or just pressing [tab] to move through interactive elements --- skipping over any non-interactive helper text that's not programmatically associated with the inputs.

  Since this is only something you'll reach from a text message link, it's unlikely that someone will be viewing the page with a desktop screen reader, but it's not impossible! You might have their laptop configured to receive text messages, for example.

  There are a few ways to associate the helper text with the inputs, but here are the options that other teams have had the most success with:

  • Consider if the helper text is necessary to complete the task, and make content edits to put any critical text in the questions/input labels themselves. If it's duplicative or doesn't communicate anything particularly meaningful, no action is needed.
  • Where appropriate, move the helper text into the hint prop for the input component. The hint text will be associated with the input via aria-describedby and available to screen reader users when they tab to the input.
  • If the helper text is relevant to multiple inputs (or hint isn't an option for some other reason), present the hint text as part of a fieldset/legend pattern, eg.:

    <fieldset>
    <legend>
     <h1>Heading for the page</h1>
     <p>Helper text</p>
    </legend>
    [... inputs]
    </fieldset>

    The helper text inside the legend can be styled to look like regular text, but when you tab into the first input in the fieldset, your screen reader will announce everything in the legend (heading and helper text), then the input label.

  No preference from me on what approach you take.

Governance team actions

• [x] Format feedback as individual tasks (check boxes)
• [x] 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
• [x] Add the Collaboration Cycle initiative epic

[benbrasso-agile6]

@loripusey I'm going to add the specifics into the design file. So, feel free to leave this ticket open and assigned to FE. Close it when FE completes the work.

[benbrasso-agile6]

Added annotations for fieldset and label to 2 pages

https://www.figma.com/file/pnR05o7NPJDS0KFUSQ0eE3/Check-in-%7C-Check-in?type=design&node-id=96%3A709&mode=design&t=0N077lnVZmT5FxmQ-1

[lee-delarm6]

Closing based on conversation with @brianseek and @benbrasso-agile6 , we've added a overarching summary title to the checkbox group which is read. This should cover the necessary description of the checkboxes