department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
281 stars 197 forks source link

[a11y-defect-3]: Use of deprecated "wizard" component results in H1 issues #63701

Open coforma-jamie opened 1 year ago

coforma-jamie commented 1 year ago

Point of contact

Jamie Klenetsky Fay (@coforma-jamie)

Severity level

3, Moderate. Should be fixed in 1-3 sprints post-launch.

Details

A wizard pattern, which is deprecated, is used to lead Vets to Form 28-8832: Screenshot 2023-08-15 at 3 18 23 PM

Using this pattern can be confusing for users. In this case, when navigating between the wizard version and intro version of the page, there's a very similar <H1>, and it may not be clear to screen reader users if they are actually navigating to separate pages.

Reproduction steps

  1. Go to this page
  2. Answer the questions in the wizard (Veteran, No, Yes, Yes)
  3. Click on "Apply for Personalized Career Planning and Guidance"
  4. Scroll to the bottom and click "go back and answer the questions again"
  5. This will take you back to the wizard, which has a very similar page title to the intro page.

Proposed solution or next steps

Short-term fix

You can use focus management to automatically focus on the <H2>, "Is this the form I need?" heading. That should make it more clear to an AT user what the page is for. Look at the File a Supplemental Claim form to see it in action. When the page loads, focus automatically goes to the <H2>: Screenshot 2023-08-15 at 3 22 27 PM

Long-term solution

As mentioned in the Design System wizard pattern page, the Wizard pattern is now deprecated and replaced by the the help users complete a sub-task pattern. We highly recommend that you use the sub-task pattern instead of the wizard pattern to avoid this accessibility issue and reduce the user's cognitive load.

References, articles, or WCAG support

  1. Focus management example
  2. Reduce cognitive load by having one thing per page
  3. How to retrofit the wizard pattern, if you absolutely must keep it

Type of issue

coforma-jamie commented 1 year ago

duplicate