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
Enter https://www.va.gov/find-locations in browser
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
https://www.va.gov/find-locations
in browser<h1>
and the next heading level is the<h4>
in the footerCurrent code
Possible Fixes
There are two possible options to offer:
<dl>
) structure, that would avoid any heading hierarchy concerns. For example:<h4>
headings to<h2>
and apply the class to style them as heading level 4. For example:WCAG or Vendor Guidance (optional)