Sitewide [AXE-CORE]: Footer headings should be changed to so that heading levels only increase by one

[jenstrickland]

Description

Currently, the headings in the footer on VA.gov are coded as <h4>. For shorter pages that have only <h1> or <h2>s, this returns an axe-core error, "Heading levels should only increase by one."

Point of Contact

VFS Point of Contact: Jennifer

Acceptance Criteria

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

Steps to Recreate

1. Enter https://www.va.gov/find-locations in browser
2. Start developer tools, ensure you have the axe extension installed (https://www.deque.com/axe/axe-for-web/)
3. Analyze using the axe extension
4. Verify that there is an <h1> and the next heading level is the <h4> in the footer

Current code

<div class="va-footer-linkgroup">
    <h4 class="va-footer-linkgroup-title">Veteran programs and services</h4>
    <ul class="va-footer-links">
        <li><a href="https://www.va.gov/homeless/" target="">Homeless Veterans</a></li>
        <li><a href="https://www.va.gov/womenvet/" target="">Women Veterans</a></li>
        <li><a href="https://www.va.gov/centerforminorityveterans/" target="">Minority Veterans</a></li>
        <li><a href="https://www.ptsd.va.gov" target="">PTSD</a></li>
        <li><a href="https://www.mentalhealth.va.gov" target="">Mental health</a></li>
        <li><a href="https://www.va.gov/adaptivesports/" target="">Adaptive sports and special events</a></li>
        <li><a href="https://www.nrd.gov" target="_blank">National Resource Directory</a></li>
    </ul>
</div>

Possible Fixes

There are two possible options to offer:

1. If the footer content is coded with description lists (<dl>) structure, that would avoid any heading hierarchy concerns. For example:

   <dl class="va-footer-linkgroup">
   <dt class="va-footer-linkgroup-title">Veteran programs and services</dt>
   <dd><a href="https://www.va.gov/homeless/" target="">Homeless Veterans</a></dd>
   <dd><a href="https://www.va.gov/womenvet/" target="">Women Veterans</a></dd>
   <dd><a href="https://www.va.gov/centerforminorityveterans/" target="">Minority Veterans</a></dd>
   <dd><a href="https://www.ptsd.va.gov" target="">PTSD</a></dd>
   <dd><a href="https://www.mentalhealth.va.gov" target="">Mental health</a></dd>
   <dd><a href="https://www.va.gov/adaptivesports/" target="">Adaptive sports and special events</a></dd>
   <dd><a href="https://www.nrd.gov" target="_blank">National Resource Directory</a></dd>
   </dl>

2. Change the current <h4> headings to <h2> and apply the class to style them as heading level 4. For example:

   <div class="va-footer-linkgroup">
   <h2 class="va-footer-linkgroup-title">Veteran programs and services</h2>
   <ul class="va-footer-links">
       <li><a href="https://www.va.gov/homeless/" target="">Homeless Veterans</a></li>
       <li><a href="https://www.va.gov/womenvet/" target="">Women Veterans</a></li>
       <li><a href="https://www.va.gov/centerforminorityveterans/" target="">Minority Veterans</a></li>
       <li><a href="https://www.ptsd.va.gov" target="">PTSD</a></li>
       <li><a href="https://www.mentalhealth.va.gov" target="">Mental health</a></li>
       <li><a href="https://www.va.gov/adaptivesports/" target="">Adaptive sports and special events</a></li>
       <li><a href="https://www.nrd.gov" target="_blank">National Resource Directory</a></li>
   </ul>
   </div>

WCAG or Vendor Guidance (optional)

• axe-core 3.4 - Heading levels should only increase by one

[caw310]

Closing as this is over 2 yrs old..