Fix Accessibility Violation - Header level

[gina-yamada]

🎫 Ticket

LG-12109 Fix Accessibility Violation on How to Verify View

🛠 Summary of changes

• Update h2 to so that is has a h3 class to fix accessibility violation on the How To Verify page

📜 Testing Plan

• Step 1 Spec with this commit was failing when we were testing flags on for Opt-in IPP. - spec/features/accessibility/idv_pages_spec.rb - test: doc auth steps accessibility on mobile

Gina Confirmed:

• Double check that mfa selection (color) is not affected -- it is nested too deep - no other hits on global search
• Find the spec that broke and add path below in testing plan- spec/features/accessibility/idv_pages_spec.rb:65
• Add new regression spec

👀 Screenshots

[zachmargolis]

Is this something that would have been caught by any of our 508 checks? Like can we add a regression spec for this view/page?

[gina-yamada]

Is this something that would have been caught by any of our 508 checks? Like can we add a regression spec for this view/page?

Yes, that is a good idea. I am looking now for an example. If you a know of a good example- please share. I am hoping to get this in asap. Thank you

[mitchellhenke]

Is this something that would have been caught by any of our 508 checks? Like can we add a regression spec for this view/page?

Yes, that is a good idea. I am looking now for an example. If you a know of a good example- please share. I am hoping to get this in asap. Thank you

https://github.com/18F/identity-idp/blob/011d42c7a454afa1f13d7d9cc7ad4dffd3386698/spec/features/accessibility/idv_pages_spec.rb is where I'd start

[gina-yamada]

Thank you @zachmargolis and @mitchellhenke

[aduth]

I'm somewhat confused what is the expected heading hierarchy of this page, or at least why "Verify your identity online" and "Verify your identity at a Post Office" have different heading levels. This would imply that "Verify your identity at a Post Office" is a subheading of "Verify your identity online", which doesn't seem correct to me, since they're presented as opposing options.

Current:

- H1: Choose how you want to verify your identity
   - H2: Verify your identity online
      - H3: Verify your identity at a Post Office
      - H3: Want to learn more about how to verify your identity?

Recommended:

- H1: Choose how you want to verify your identity
   - H2: Verify your identity online
   - H2: Verify your identity at a Post Office
   - H2: Want to learn more about how to verify your identity?

[gina-yamada]

@carmenrosalop The How to Verify page had an accessibility violation on it. The page had a h1 tag and a h3 tag. It did not have an h2 tag. The violation: heading-order: Heading levels should only increase by one.

To fix the violation, I changed the first h3 into an h2. I added a class of h3 on it so it would pick up the h3 style. However, Andrew points out a valid concern I overlooked; the hierarchy is now not accurate. (See current.)

Can I move forward with Andrew's suggestion and change all of the h3 tags to h2 tags? Not sure if I need additional approval or if your sign off is enough? I imagine Figma will need to be updated as well. (Size increase, for example from h3 to h2). If this is okay, I will write up a developer ticket and get this resolved.

[gina-yamada]

After meeting with @carmenrosalop, I created a new ticket to make updates to UI for this view.

Rather than the recommendation, we will..

1. Use the label tag for Verify your identity online and Verify your identity at a Post Office
2. Change the text color of the label to #454545 (back to grey rather than the default blue)
3. Ensure Most Common is on the top line and the text Verify your identity online is on the line below
4. Change the h3 text Want to learn more about how to verify your identity? to be an h2 tag