[a11y Component Audit] IIR: Veteran New Account Flow within Authenticated Experience, Welcome Pathway

[sara-amanda]

[!IMPORTANT] It appears they will be taking this to the Design Council on Thursday, July 18. If we have any additional feedback, we can provide it before then, if time allows.

CAIA Review

CAIA would like to conduct an accessibility review of the proposed component, prior to it being presented to the Design System Council on 7/18/2024.

• CAIA noted in May that the team may create a custom component and need an accessibility review.
  • Recently we identified on 7/9/2024 that they are submitting it for review on 7/18/2024.
• If time allows, we would still like the opportunity to conduct an accessibility audit of this component.
  • Access requested by SK on 7/10/2024
  • Martha agreed, if we can, to review this component.

Proposed Component

The proposed banner component can be viewed in Figma.

Figma File

Because there isn’t a perfect component for this (something unobtrusive and possibly dismissible or expandable, we are working on some proposed components for the Design Council). As a user applies for benefits, we don’t want our message at the top to get in the way of the information lower on the page. We have a vision that might incorporate a 3-5 step process, before vanishing once a user has done those tasks, but that is a future possibility. Variations can be seen in the Proposed Components Sandbox and are a work in progress.

Design Intent Feedback

Should: As you decide whether/how long the welcome page persists for users, make sure you disclose to users what will happen ("you'll see this page for 30 more days" or "if you ever want to view this page again, go to..." etc). - Brian DeConinck

Experimental Design: Component Ticket

Experimental Design [Expandable Task List]

During our accessibility review for our overall onboarding work, we did describe this component in its earliest conception. The accessibility from CAIA noted that it looked fine, as long as it was coded similar to an according, ensuring that AT users have the ability to navigate it. - IIR Team 6/27/2024

IIR Slack

The component was an informational alert but it was stretched out and so it looked more like a banner. We adjusted to the standard alert size. - Raquel Eisele 7/12/2024 IIR Slack

Resources

Links

[!NOTE] There is no code for this component yet.

• Banners
• Informational Alert
• Consider dismissability or expandable.

Images: Expandable Process List

Banner V1 - LOA 1/LOA3

• Process list that can be expanded, unobtrusive unless the user wants to view it
• Again, similar to accordion, but more visually appealing / eye catching
• Once all tasks (no more than 4) are completed, the user is officially “onboarded”
• Component would disappear after all tasks are complete LOA 1 version could just be a simple “Welcome to VA.gov” + generic message and the process list appears once a user has authenticated

Teams

Toggle to view the CAIA team members and IIR team members

### CAIA Assignees 1. @SarahKay8 2. `TBD` ### IIR - OCTO product owner: Jeff Barnes - Product name: Veteran New Account Flow within Authenticated Experience, Welcome Pathway (Onboarding) - Product manager: Kat Kufalk - Slack channel: [iir-product-teams-public](https://dsva.slack.com/archives/C05RJS5DANT) - Dedicated content writer on your team (if you have one): No dedicated content writer - **Dedicated a11y specialist on your team (if you have one): No dedicated a11y specialist**

### Tasks
- [ ] Full accessibility review of the component is completed
- [ ] Add descriptions of any issues found to this ticket
- [ ] If any problems are found, add screen recordings and/or screenshots to comments on this ticket that show the problem.

### Acceptance Criteria
- [ ] Component has been reviewed for accessibility issues
- [ ] Review has been shared with the VFS Team [iir-product-teams-public](https://dsva.slack.com/archives/C05RJS5DANT)

[SarahKay8]

• Making the modal dismissable is generally preferred as it tends to be more intuitive and provides immediate user control. It's also easier to implement and test for accessibility.
• Some key things to remember if you use a "Remind me later" link instead of making it dismissable -ensure the user is clearly informed about when they'll be reminded again, and provide an option to opt out if desired.
• Make sure touch target for remind me later link is at least 44x44 pixels and large enough to be tapped on mobile
• Focus should move to remind me later link when modal appears

Content - What "thing"?

Is step 3 greyed out because Step 2 hasn't been completed? If so add aria-describedby to link a description as to why it is disabled and remove it from tab order to prevent it from receiving focus. For example - "Step 3 will be available once Step 2 is completed"

[SarahKay8]

@sara-amanda Jotted a few things I caught.

[sara-amanda]

Shared via intake ticket comment with IIR team.

[emcruer]

Thank you! We attended the DSC office hours to talk through a little more what we're trying to do, so right now we are leaning toward scrapping this version in favor of a task list based on UK.gov's version. We're going to work on it a bit more - once we've tested the overall concept of asking users to perform tasks with the current components in the DS - then hopefully re-test, improve it, and present again.