In theory, headers are simple. In the WCMS, your page title is automatically a first-level header (H1), and all your other headers should cascade down from there, from a simple second-level (H2) to the maximum sixth-level header (H6).
In practice, it's easy to get off track. Header issues are one of the top user-fixable accessibility issues across the WCMS. Keeping track of headers across multiple blocks and sections can be tricky, and rearranging content can rearrange your headers.
It's important to remember that the header structure covers the entire page, not just the primary content area - headers in the sidebar and in your local footer need to be taken into consideration.
It's also important to only use headers for their intended purpose - they're not a way to create a subtitle or tagline, make things bigger, or give the text more emphasis. Additionally, you should never have two of the same level headers back-to-back without content between them, or end your content with a header.
One recommended technique for creating a good header order is to think of your headers as forming your page's table of contents. Look at the headers on their own - if the headers don't make sense, if there are gaps, or if things seem out of order, those are all signs that your headers likely need restructuring.
To give text a different appearance without resorting to improperly-used headers, consider using alternative styles in the editor instead (like "enlarged" or "highlight"), or using a different block type like a blockquote or call to action.
Checking the header order on your site
As you are authoring content, you can check for header order issues in a couple of different ways.
When you're inside the visual editor (e.g. in a copy text block), you can click the "check accessibility" button, which will identify accessibility issues within your content, including poor header order. It is important to consider this in the context of the rest of the page, however - you may have a situation where the header order reports as being wrong within the block because the other headers are in other blocks.
When you're on a page, the Editoria11y accessibility checker will identify accessibility issues with the whole page, again including header problems.
Editoria11y can also show you an outline of all the headers on your page. This is accessed through the circled "?" or number overlay, and then clicking on the "outline" tab (note that when Editoria11y gets updated in a future WCMS release, this will become a dedicated button to the left of the "?" or number).
Additionally, if you have access to Siteimprove, you can check your site's accessibility report for instances of "Headings are not structured" and "Content missing after heading". Visiting the link, you will get a list of all the pages where the issue occurs. If this is every page on your site, there is a good chance that the issue is within your site footer, which is considered to be part of the page and should therefore be fixed.
Further reading
- "", Bureau of Internet Accessibility
- "", Yale University Usability & Web Accessibility