[Content organization] Your page doesn't follow heading hierarchy. Headings aren't properly nested, and headings and/or labels aren't relevant to the page. (02.04.1)

General Information

VFS team name

Authenticated Experience

VFS product name

My VA

VFS feature name

Payment Information V2

Point of Contact/Reviewers

Brian DeConinck - @briandeconinck - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

Platform Issue

Your page doesn't follow heading hierarchy. Headings aren't properly nested, and headings and/or labels aren't relevant to the page.

Issue Details

Benefit payment cards have an h3 heading immediately followed by an h4 heading and no content besides what follows that h4, which isn't a particularly intuitive structure for screen reader users. Generally the h4 should be used to denote a sub-section of content beneath the h3. In this card, that extra structure doesn't seem necessary and doesn't provide any extra value.

One way to think about heading structure is as a table of contents. The content that follows the h4 doesn't seem distinct enough to merit its own entry in the table of contents separate from the h3.

That said, the h3 just being a dollar amount might not be sufficient context for a screen reader user to decide if that's the section they want to navigate to. I would suggest associating the "Compensation & Pension - Recurring" with the h3 rather than having it be another heading level beneath it.

Link, screenshot or steps to recreate

Using test user 80, you get this benefit payment card:

<div ...>
   <h3 class="vads-u-margin-top--0" data-testid="deposit-header-v2">
      +$3,057.13
   </h3>
   <h4 class="vads-u-margin-top--0">
      Compensation &amp; Pension - Recurring
   </h4>
   <p ...>
      Check mailed on November 1, 2022
   </p>
   <a ...>
      View your payment history<i ...></i>
   </a>
</div>

VA.gov Experience Standard

Category Number 02, Issue Number 04

Other References

WCAG SC 1.3.1_A WCAG SC 2.4.6_AA

Platform Recommendation

My best suggestion would be to make the h4 a p paragraph with styling to make it look like a heading, and then using aria-describedby to associate it with the h3. That would look something like this:

<div ...>
   <h3 class="vads-u-margin-top--0" data-testid="deposit-header-v2" aria-describedby="some-unique-id">
      +$3,057.13
   </h3>
   <p class="..." id="some-unique-id">
      Compensation &amp; Pension - Recurring
   </p>
   <p ...>
      Check mailed on November 1, 2022
   </p>
   <a ...>
      View your payment history<i ...></i>
   </a>
</div>

Screen readers will announce the h3 and the line beneath it together, providing full context while still having a heading structure that models the content.

VFS Guidance

Close the ticket when the issue has been resolved or validated by your Product Owner
If your team has additional questions or needs Platform help validating the issue, please comment on the ticket
Some feedback provided may be out of scope for your iteration of the product, however, Platform's OCTO leadership has stated that all identified issues need to be documented and it is still your responsibility to resolve the issue.
If you do not believe that this Staging Review issue ticket is the responsibility of your team, comment below providing an explanation and who you believe is responsible. Please tag the Point of Contact/Reviewers. Governance team will research and will follow up.

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