Headings

Owned by Danielle Turner (Unlicensed)
Last updated: Mar 04, 2022 by Ericca Rowe
2 min read

Headings on a page serve to organize content and create a hierarchy of information that helps users quickly access the content they need. They also make it significantly easier for visitors with disabilities to navigate your website. Each page should have a heading structure, identified by <h1> through <h6> tags, and should follow a logical outline. In other words, each heading level should provide information to support the content of the heading level directly above it. 

 

An <h1> heading, for example, should provide users with the overarching focus of the themes and topics covered by the content on that page. The next level of headings, <h2>, should provide a more detailed focus of the content described by the <h1> heading that came before it. Likewise, <h3> headings should provide a more detailed focus of the content described by the <h2> heading that came before it, and so on.


This combination of heading levels makes it much easier for all your users, regardless of their ability, to differentiate between the main points and subpoints of your content.

How to Fix Issues with Headings

  • From the left sidebar main menu of your Siteimprove Dashboard, click on Accessibility; this will open the Accessibility submenu

  • From the Accessibility submenu, click on Issues; this will open a table that lists all accessibility issues for you to review

  • From the filter options at the top right of the table, click on Priority Issues; this will expand the Priority Issues filter submenu

  • From the filter options, select Issues with Headings; this will filter your results to display only issues with headings

    •  Note: Some examples of heading issue descriptions include:

  • Heading is missing text

  • No headings on page

  • Structure headings

  • From the list of heading issues on the table, select the heading issue you want to fix by clicking on its description; this will take you to an overview page listing all the pages on your site affected by this heading issue

    • Note: At the top of the page, you will see the Description of the heading issue as well as a suggestion on How to fix it

  • Scroll down the overview page until you see the table listing all the pages affected by that heading issue

  • Click on the title of one of the affected pages; this will take you to the Page Report for that page

  • You will now see every instance of that heading issue highlighted on the Page Report

  • Go to the page affected by the heading issue in your Content Management System (CMS)

  • Fix the heading issue and republish the page

    • Note: Once the fix is live, you can re-check the page in Siteimprove to make sure the alt text issue was fixed correctly