[a11y Support] Accessibility Fix Request from Benefits Team 1

[kjduensing]

Status

[2024-02-27]

• Laura Flannery verified the list of pages to see if any others need H2; refer to comments for the results.
• Laura's conclusion: Based on this list (and not including the ones where I couldn't find a Drupal page), H3 does look like it is the correct default heading level - there being 11 H3's and only 9 H2's - there is not an overwhelming majority though. I had to ask Megan Zehnder a question about a page and she mentioned they have been putting more content into widgets so I asked her what she thought would be the more common pattern going forward and she said she would get back to me.

[2024-02-21]

• Jill Adams reported that the CTA widget is used across several health apps pages (e.g. test results, refill rx, schedule an appt, etc.), and Chris Kim (PW FE Engineer) confirmed this is the same CTA widget code used on our other pages (e.g. Rx refill, secure messaging, etc.). The header level was set to default H3 when this converted to the va-alert DS component:. To use H2 instead, you have to override and pass that in.

CAIA Assignees

• CAIA Team Member 1
• CAIA Team Member 2 (if needed)

What does your team need support for? Check all that apply.

• Launching one or more new unauthenticated (static) VA.gov pages
• Making revisions to one or more existing unauthenticated (static) VA.gov page
• Launching a new online form, app, or tool on VA.gov
• Making revisions to an existing online form, app, or tool on VA.gov
• Something else (please add details in the next question)

What do you need help with?

• Content support
• IA support

Please be specific about the content or IA support you need and provide any additional documents and/or links that will help us help you. If we need to add a react widget to a page, be sure to provide the code here.

We found in an accessibility audit that the organization of headings was not ordered logically for users with screen readers. We're looking for someone to change the heading levels on the <SignIn/> CTA Widget and the va-detailpage-sidebar to be more accessible to folks using screen readers. I've attached a screenshot of the Headings Map tool output:
. Please also see the linked ticket under the Supporting Artifacts section

Specifically:

1. The "Sign in" CTAWidget heading should be an <h2/> instead of an <h3/>.
2. "Download your VA letters on your mobile device..." should be an <h3/>, not a <h2/>

Please feel free to reach out if y'all need more info. Thank you!

Will this new product be released incrementally (for instance 25% of users initially)?

• Yes
• No
  (Not a new product)

Note: If you checked yes, we'll reach out to discuss details about the content in the react widget.

When do you expect to launch your product to 100% of users?

Please provide an estimated date so our team can create other relevant tickets.

Supporting artifacts

Please provide supporting artifacts as available.

• Link to product outline:
• Link to or attach user flows:
• Link to prototype or mockups:
• Link to any epics/issues that may be helpful: 508-defect-2: Download letters page headings are not logically ordered #45636

Will this work be going through the Collaboration Cycle?

• Yes
• No

When does this work need to be done?

• Estimated launch date: n/a
• Estimated staging review date: n/a
• Content and IA work needed by: No date specified, but this has been flagged as a "serious accessibility issue"

Do you plan to bring this to an upcoming content office hours session?

• Yes, benefit content office hours (Thursdays, 3:00 p.m. to 3:45 p.m. ET)
• Yes, health content office hours (Thursdays, 11:00 a.m. to 11:30 a.m. ET)
• Yes, unauth office hours (Mondays, 11:00 a.m. to 11:30 a.m. ET)
• No, but I'd like to schedule time to talk about this request
• No, let's work asynchronously and meet if needed

Note: If we think this work would benefit from a collaborative session with you, we may ask you to bring it to office hours or set up a separate time to meet.

About your team

• Team name:
• OCTO-DE product owner: Matt Self
• Product manager: Jacob Worrell
• Designer: Skyler Schain
• FE engineer: Kevin Duensing
• Product/team Slack channel: https://dsva.slack.com/archives/C5AGLBNRK

•   Accessibility Lead: Josh Kim
  

Next steps

Once you’ve submitted this ticket, please post a link to this issue in the #sitewide-content-ia Slack channel and tag Randi Hecht.

If you also need engineering support from the Public Websites team, fill out their intake request form.

If you need a page/URL redirected, a URL changed or a vanity URL set up, please submit a Redirect, URL change, or vanity URL request

[kjduensing]

@RLHecht I know y'all are busy, would you mind sharing a quick status update when you get the chance? Thanks!

[RLHecht]

Hi @kjduensing the sign-in widget is not something our team manages. I believe this is in the design system as an H3 so would need to be changed universally.

We also didn't create the mobile device alert in drupal. It was created by the mobile team and we added it to the static page. So we wouldn't be able to fix this one either unfortunately.

[RLHecht]

@kjduensing Let me know if i should close this out or take it off our board. Thanks!

[joshkimux]

@RLHecht got it! I'll write up a bug ticket for the DST

[joshkimux]

@kjduensing @RLHecht , it looks like they may have updated this to a h2 in the design system. Not an engineer by any means, but is this a matter of just refreshing the component we're using? Not sure why it's rendering as a h3 when the source should be a h2 😕

[joshkimux]

@kjduensing @RLHecht small bump on this; would y'all or anyone y'all know have an answer to the prior question? I can also try to ask in the design system channel.

[RLHecht]

That sounds right to me, but also not an engineer so I'm not sure how this gets fixed! We can put in a new sign-in widget if someone can tell us the app code we'll need. Though I don't know if that's what's needed.

[kjduensing]

So small caveat - I'm not real familiar with the design system components. That said, looking at the docs, it appears you can specify the html tag of your choosing for the headline (Stories -> "View code" on any of the examples):

<va-alert>
  <h2 slot="headline">
    Track your claim or appeal on your mobile device
  </h2>
  
  // ...

</va-alert>

My take on this is whoever owns the sign in widget has rendered this va-alert with an h2 instead of an h3.

Hope it helps!

[kjduensing]

Actually, it might go deeper than that. The hierarchy of components is extremely customizable all the way down, which is great in some ways, but makes it difficult to track down exactly where the headingLevel property is set.

[joshkimux]

My take on this is whoever owns the sign in widget has rendered this va-alert with an h2 instead of an h3.

This is fantastic @kjduensing ! Dumb question here on the download letters page

1. given that the sign in widget should be rendered as a h2, is there a reason why it's showing up as a h3 on this page?
2. and if we can fix it, who would be able to track down where it is and adjust it on this page specifically?

[kjduensing]

1. Ah I see where I was unclear, thanks for the redirect. What we're seeing here isn't a bug - the code is behaving as it was written. The sign in widget allows anyone who uses it to make the title whatever header level they want. So it isn't that the title is being rendered incorrectly due to a bug, it's that the title is actually an h3 in the code.
2. What we'd need to do to fix this is find the code that is setting the header level to an h3 and simply change it to an h2. The change is trivial, but there are some challenges:
   • Finding where this code is is harder than I thought
   • When I do find the code, is it localized or would changing the code have a broader impact across the site?
   • If changes have a broad impact, who should be responsible for fixing this?

[joshkimux]

@jamigibbs and @Mottie this might be a long shot, but by any chance do either of you have answers to Kevin's second question?

[jamigibbs]

@joshkimux If this is the va-alert component, then the way to change the header element for the "Sign in to get your...." text would be to use the headline slot with whichever header size needed.

This is wha @kjduensing mentioned above: #50215 (comment)

If we're unsure if this is va-alert, can you provide a link to where this is located? I'll be happy to inspect and confirm.

[kjduensing]

I can confirm this is a va-alert :)

[Mottie]

That page looks like it's a static content page, so you'd have to report the problem to the sitewide content people. I remember someone mentioned that they reported the H4 placed before the H1, but I can't find the reference

[joshkimux]

@RLHecht do you know of any engineers on the sitewide content team this could be assigned to?

[Mottie]

Oh wait, that's using the standard call to action widget - I haven't dived into that code, but here is where the letters app is defined. The call to action alert code does include a headerLevel.

Update: Whatever calls the cta-widget code is passing in a headerLevel prop

[kjduensing]

Right, @Mottie, but what's calling the CTA widget? I wasn't able to tell what sets the actual headerLevel prop..

[sara-amanda]

@RLHecht or @SarahKay8 , do you know who we should best route this to?
cc: @coforma-terry

[eli-oat]

Uncertain who owns this code. Not sure about the next steps.

CAIA to check in with DST on Slack.

[coforma-terry]

Hey @eli-oat - did DST shed any light on who owns this code?

[eli-oat]

@coforma-terry followed back up for further info in the DST channel

[eli-oat]

@coforma-terry -- per DST, this is owned by the public websites/sitewide team.

[coforma-terry]

@strelichl - we need to transfer this to public websites to implement 👍

[FranECross]

@coforma-terry @strelichl Added to our next refinement to review. Thanks!

[jilladams]

@laflannery FYSA, since this is about header levels. The CTA widget is used across several health apps pages (e.g. test results, refill rx, schedule an appt, etc.). I'm not certain if the header levels are set per page where it's called, or once and for all. We'll need to think about that during this ticket.

[jilladams]

From FE refinement:

• @chriskim2311 confirmed this is the same CTA widget code used on our other pages (e.g. Rx refill, secure messaging, etc.)
• The header level was set to default H3 when this convered to the va-alert DS component: A11y: Set default H3 header level for va-alert CTA widget (general) and correct header level for va-alert components in PW portfolio, where missing va.gov-cms#13860. To use H2 instead, you have to override and pass that in.

Qs:

• Does the heading level change when authed vs. unauthed? (After auth, the contents of the widget will change.)
• Header by default is an H3. This would apply to any place the CTA Widget is used and a different header level isn't passed in. List of all uses of this widget: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/applications/static-pages/cta-widget/ctaWidgets.js#L16 @laflannery would like to verify this list of pages, to see if any others need H2. She'll do that within this ticket and add notes.

[laflannery]

Un-auth heading levels:

• ADD_REMOVE_DEPENDENTS: H3 > Correct
• CHANGE_ADDRESS: H3 > Correct
• CLAIMS_AND_APPEALS: H3 > INCORRECT
• COMBINED_DEBT_PORTAL: H3 > Correct
• DIRECT_DEPOSIT: H3 > Correct
• DISABILITY_RATINGS: H3 > INCORRECT
• EDUCATION_LETTERS: No Heading > INCORRECT (Should be H3)
• ENROLLMENT_VERIFICATION: H3 > Correct
• GI_BILL_BENEFITS: H3 > INCORRECT Update 11/25: Correct now
• HEALTH_RECORDS: H3 > Correct
• HOME_LOAN_COE_STATUS: H3 > INCORRECT
• LAB_AND_TEST_RESULTS: H2 > Correct
• LETTERS: H3 > Correct
• MANAGE_VA_DEBT: H3 > Correct
• MESSAGING: H2 > Correct
• RX: H2 > Correct
• SCHEDULE_APPOINTMENTS: H2 > Correct
• UPDATE_HEALTH_BENEFITS_INFO: This widget is being rolled out in an incremental launch, I can't see it currently but CAIA said possibly next week it will be at 100%.
• VETERAN_ID_CARD: H3 > Correct
• VIEW_APPOINTMENTS: H2 > Correct
• VIEW_DEPENDENTS: H3 > Correct (Is this different from the Add dependents, the first item on this list? I couldn't find 2 different pages)
• VIEW_PAYMENT_HISTORY: H3 > INCORRECT
• VRRAP: I can't find this

I can't find Drupal Pages for the below. The only pages I can find that have the widget aren't in Drupal so I might have the wrong page or maybe these got moved away from PW, maybe?:

• DISABILITY_BENEFITS: H2 > Correct
• HEARING_AID_SUPPLIES: H3 > INCORRECT
• HIGHER_LEVEL_REVIEW: There isn't a traditional widget on this page
• VET_TEC: H3 > INCORRECT

Based on this list (and not including the ones where I couldn't find a Drupal page), H3 does look like it is the correct default heading level - there being 11 H3's and only 9 H2's - there is not an overwhelming majority though. I had to ask Megan Zehnder a question about a page and she mentioned they have been putting more content into widgets so I asked her what she thought would be the more common pattern going forward and she said she would get back to me.

[FranECross]

• Per Jill we own the disability rating tool.
• Need to look at the list to see which we own and which we don't.

[strelichl]

@FranECross are we ok to close this?

[FranECross]

@laflannery Based on your last comment and research, is there work for the PW team (or a different team) to do on this ticket, or may it be closed? cc @strelichl @jilladams

[laflannery]

@FranECross It would depend on if the headings are correct on all the widgets we own

[strelichl]

@FranECross I'm assuming your thumbs up means widgets are good to go and we can close? Just want to make sure!

[FranECross]

@strelichl Apologies for the confusing thumbs up. 😉 I was just acknowledging Laura's note and believe we'll need to review the headings on the widgets we own to ensure they are correct. I've added this to my task list and will follow up.

[laflannery]

Talked to Michelle, I'm going to make individual tickets for all the headings that need changing so they can easily be pulled into sprints

[laflannery]

Closing in favor of the new, separate tickets:

• Update widget heading to H2 on Claim or Appeal Status va.gov-cms#19956
• Update widget heading to H2 on Disability Rating va.gov-cms#19957
• Update widget heading to H3 on Education letters va.gov-cms#19958
• Update widget heading to H2 on Home Loan COE Status va.gov-cms#19959
• Update widget heading to H2 on View Payment History va.gov-cms#19960