508-defect-2: Download letters page headings are not logically ordered

[joshkimux]

⚠️ blocked by this sitewide ticket

Point of contact

Josh Kim

Severity level

2, Serious. Should be fixed in 1-2 sprints post-launch.

Details

User Story

As a screen reader user, I want to navigate the hierarchy of the page content using heading levels to save time and frustration.

Problem

Two issues exist:

• "Please sign in..." heading should be a h2, not a h3 to avoid a skipped heading
• "Download your VA letters on your mobile device..." should be a h3, not a h2
  • This can remain a h2, only if its parent "Get your VA letters online" is deleted

Reproduction steps

1. Go to the download letters page
2. Using headingsMap, confirm headings are out of order

Proposed solution or next steps

Acceptance criteria

• [x] "Please sign in..." is a h2
• [ ] "Download your VA letters..." is a h3 OR
  • [ ] "Get your VA letters online" is deleted (only if unnecessary)

References, articles, or WCAG support

1. Headings - Web Accessibility Tutorials

Type of issue

• [ ] Screenreader
• [ ] Keyboard
• [ ] Focus
• [X] Headings
• [ ] Color
• [ ] Zoom
• [ ] Semantics
• [ ] Axe-core
• [ ] Something else

[kjduensing]

@joshkimux @jacobworrell I just submitted a sitewide-content support issue on Github for this ticket. The headers mentioned above are not within our applications - they're part of the static-pages application.

[kjduensing]

@joshkimux I think I remember you being out so no rush! I'm not sure what next steps to take on this. Check out sitewide-content support issue for details, but it sounds like they're not responsible for the 2 items mentioned. CC @jacobworrell

[joshkimux]

@kjduensing apologies on the delay to respond 🙇 just wrapped up the SC audit. I double checked this, and it looks like this is a h2 in storybooks, not a h3 😕 I left a reply for Randi in that thread.

If we can't figure out next steps, I'd recommend us going to platform office hours for support ❤️

[jaredcunha]

I double checked this, and it looks like this is a h2 in storybooks, not a h3 😕 I left a reply for Randi in that thread.

The heading levels aren't actually hardcoded into the component. The heading can be anything.

<va-alert
  close-btn-aria-label="Close notification"
  status="continue"
  visible
>
  <h2
    id="track-your-status-on-mobile"
    slot="headline"
  >
    Track your claim or appeal on your mobile device
  </h2>
  <div>
    <p className="vads-u-margin-top--0">
      You can use our new mobile app to check the status of your claims or appeals on your mobile device. Download the{' '}
      <strong>
        VA: Health and Benefits
      </strong>
      {' '}mobile app to get started.
    </p>
    <button className="va-button-primary">
      Sign in to VA.gov
    </button>
  </div>
</va-alert>

[jerekshoe]

Yeah to add to what @jaredcunha said, this example highlights the fact that you can use an h4 or any other header with the va-alert component

[jacobworrell]

Someone on our team is going to investigate where the header level is set in the code and assess the feasibility of our team making these changes. Depending on what we find, we may recommend another team owning these changes or go ahead and make the changes ourselves.

[HeatherWidmont]

We will create a new ticket that addresses the design changes that solve the open problems mentioned on this ticket & the other ticket - https://github.com/department-of-veterans-affairs/va.gov-team/issues/45641

Closing both of these tickets.