Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.
By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.
Use headings to outline the page #
h6 elements to create a structural outline for your page. The goal is to create a skeleton or scaffold of the page such that anyone navigating by headings can form a mental picture.
A common practice is to use a single
h1 for the primary headline or logo on a page,
h2s to designate major sections, and
h3's in supporting subsections:
Don't skip heading levels #
Developers often skip heading levels to use the browser's default styles that closely match their design. This is considered an anti-pattern because it breaks the outline model.
Instead of relying on the browser's default font-sizing for headings, use your own CSS, and don't skip levels.
For example, this site has a section called "IN THE NEWS", followed by two headlines:
The section heading, "IN THE NEWS", could be an
h2, and the supporting headlines could both be
font-size for "IN THE NEWS" is smaller than the headline, it may be tempting to make the headline for the first story an
h2 and to make "IN THE NEWS" an
h3. While that may match the browser's default styling, it would break the outline conveyed to a screen reader user!
Though it may seem counterintuitive, it does not matter if visually
h4's are larger than their
h1 counterparts. What matters is the outline conveyed by the elements and elements' ordering.
You can use Lighthouse to check if your page skips any heading levels. Run the Accessibility audit (Lighthouse > Options > Accessibility) and look for the results of the Headings don't skip levels audit.
Use landmarks to aid navigation #
HTML5 elements such as
aside act as landmarks, or special regions on the page to which a screen reader can jump.
Use landmark tags to define major sections of your page, instead of relying on
divs. Be careful not to go overboard because having too many landmarks can be overwhelming. For example, stick to just one
main element instead of 3 or 4.
Lighthouse recommends manually auditing your site to check that "HTML5 landmark elements are used to improve navigation." You can use this list of landmark elements to check your page.
Bypass repetitive content with skip links #
Many sites contain repetitive navigation in their headers, which can be annoying to navigate with assistive technology. Use a skip link to let users bypass this content.
A skip link is an offscreen anchor that is always the first focusable item in the DOM. Typically, it contains an in-page link to the main content of the page. Because it is the first element in the DOM, it only takes a single action from assistive technology to focus it and bypass repetitive navigation.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
/* style.css */
Try it! Live skip link example.
Lighthouse can help you check if your page contains a skip link. Run the Accessibility audit again and look for the results of the The page contains a heading, skip link, or landmark region audit.
Technically, this test will also pass if your site contains any
h6 elements or any of the HTML5 landmark elements. But although the test is vague in its requirements, it's still nice to pass it if you can!