search

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 Support] Accessibility Fix Request from Benefits Team 1 #50215

Open kjduensing opened 1 year ago

kjduensing commented 1 year ago

Status

[2024-02-27]

[2024-02-21]

CAIA Assignees

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

What do you need help with?

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: image. 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)?

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.

Will this work be going through the Collaboration Cycle?

When does this work need to be done?

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

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

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 commented 1 year ago

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

RLHecht commented 1 year ago

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 commented 1 year ago

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

joshkimux commented 1 year ago

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

joshkimux commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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?
Screenshot 2023-04-27 at 10 51 03 AM
kjduensing commented 1 year ago
  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 commented 1 year ago

@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 commented 1 year ago

@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: https://github.com/department-of-veterans-affairs/va.gov-team/issues/50215#issuecomment-1525711712

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 commented 1 year ago

I can confirm this is a va-alert :)

Mottie commented 1 year ago

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 commented 1 year ago

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

Mottie commented 1 year ago

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 commented 1 year ago

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

sara-amanda commented 1 year ago

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

eli-oat commented 12 months ago

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

CAIA to check in with DST on Slack.

coforma-terry commented 9 months ago

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

eli-oat commented 9 months ago

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

eli-oat commented 9 months ago

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

coforma-terry commented 7 months ago

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

FranECross commented 6 months ago

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

jilladams commented 6 months ago

@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 commented 6 months ago

From FE refinement:

Qs:

laflannery commented 6 months ago

Un-auth heading levels:

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?:

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 commented 6 months ago
strelichl commented 4 weeks ago

@FranECross are we ok to close this?

FranECross commented 4 weeks ago

@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 commented 3 weeks ago

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

strelichl commented 3 weeks ago

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

FranECross commented 3 weeks ago

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