Did an “Incorrect Heading Order” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.
About the Incorrect Heading Order Error
How are headings correctly structured in HTML?
In HTML, headings are denoted with what are colloquially referred to as “H tags.” These tags go in order from <h1>, the most important, to <h6>, the least important. Wrapping your heading text in HTML heading tags at the proper level (rather than paragraph tags) helps users to better understand the flow of content on the page and how various sections relate to one another.
Text for headings should be wrapped in an opening and closing heading tag at the appropriate level for where the heading falls in the hierarchy of the page. For example, the heading for this section looks like this:
<h3>How are headings correctly structured in HTML?</h3>Whereas the larger heading above it, that groups all of the subgroups in this section, is coded with an <H2> tag:
<h2>About the Incorrect Heading Order Error</h2>In this way, the headings on the page follow a natural outline-style format. You can learn more about why headings should be properly denoted with H tags on the Possible Heading page and how headings can make content more readable on the Missing Headings page.
What does the Incorrect Heading Order error mean?
An Incorrect Heading Order error means your heading structure has skipped over a level. For example, if your page structure has a level 3 heading (<h3>) under a level 1 heading (<h1>), an Incorrect Heading Order error will be flagged because there is no <h2> tag between the H1 and H2.
How does Accessibility Checker test for incorrect heading order?
While auditing your page or post content, Accessibility Checker will identify all heading tags in the content. Then, for each heading tag in the content, it will check to see if the immediately preceding heading tag is either the same heading level or one lower, numerically. If the immediately preceding heading level is not the same or one lower, an Incorrect Heading Order error will be flagged.
This check will check against both semantic heading tags (<h1>, <h2>, etc.) and also other HTML elements that include a heading role and aria-level, for example: <div role="heading" aria-level="2">About Us</div>.
Impact on Accessibility
Why are heading levels important?
Heading levels are important for users of all abilities and disabilities.
A properly structured page establishes a hierarchy of information, guiding users to read the information in order and can help users to better understand how various sections of content are related to one another. Headings make it easier for all users to skip ahead, skim a page, or find specific information that they are looking for; this is equally applicable for sighted users, who can look through headings visually, and for screen reader users who can listen to headings by level and have the screen reader skip forward to the content they want.
How incorrect heading order hurts accessibility
Many screen readers have shortcut keys that allow blind and visually impaired users to navigate website content more quickly. On a desktop computer, NVDA screen reader users can, for example, press the letter ‘H’ key to hear all headings on a page or press a number key ‘1’ through ‘6’ to hear all of the headings at that level. If your headings are not in the correct order on the page, that can be confusing to screen reader users and can make heading navigation not work for them.
Here are some examples of problems potentially caused by incorrect heading order:
- On a page that goes from H1 to H3 and skips H2, if a user presses the ‘2’ key and is told that there are no headings available, he or she will assume that the page does not have headings at all and will not try the ‘3’ key to hear level 3 headings.
- On a page with multiple H1 tags, a screen reader user may be confused about the main purpose of the page since there is only supposed to be one level 1 heading.
- If the H1 tag is not the first element on the page, when a screen reader user skips to that heading to start reading the page, he or she will miss all of the content incorrectly added before the H1.
Incorrect heading order can also present challenges for sighted users who are able to visually see the headings on the page. Part of having an accessible website is having a consistent interface throughout the entire site.
Many website designs have unique styles (fonts, colors, and sizing) for different heading levels. These unique styles add to the design aesthetic on the page but also can provide cues to readers as they move through the website. If a page on your website does not follow the same heading order as other pages on the site, the visual styles of the headings relative to one another will not be consistent and may confuse users or distract them when they visit that page.
Relevant WCAG 2.1 Success Criteria
1.3.1 Info and Relationships – Level A
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
2.4.1 Bypass Blocks – Level A
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
2.4.6 Headings and Labels – Level AA
Headings and labels describe topic or purpose.
2.4.10 Section Headings – Level AAA
Section headings are used to organize the content.
How to Fix an Incorrect Heading Order Error
What to do (in short)
To fix incorrect heading order errors, you will need to either change the incorrect heading level to the correct heading level, or add content with the correct heading level in between the two already existing levels.
How to find and fix skipped heading levels on your WordPress posts or pages
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have an Incorrect Heading Order error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the error to see a list of the headings that caused the error to be flagged.
In the screenshot above, there are two H5 tags that are listed under the Incorrect Heading Order error:
<h5>I’m a Certified Health Coach AND<br>I CAN’T WAIT TO HELP YOU!</h5>
<h5 class="has-text-align-center">MADISON’S EDUCATION</h5>This error is taken from the about page on a demo website that we use to demonstrate accessibility testing and show common accessibility errors. The about page of this demo website looks like this:
In the screenshot above, we have marked the headings on the page which follow this structure:
<h1>About</h1>
<h2>Hi, I’m Madison!</h2>
<h5>I’m a Certified Health Coach AND<br>I CAN’T WAIT TO HELP YOU!</h5>
<h5 class="has-text-align-center">MADISON’S EDUCATION</h5>The two level 5 headings were flagged by Accessibility Checker because there are no level 4 headings preceding them. This About page was generated exactly like this by the theme developer – unfortunately incorrect heading order is one of the most common accessibility errors that we see.
Luckily, this is an easy fix. If this were your website all you would need to do is change the H5 headings to H3 headings so that the page would have the correct heading order
<h1>About</h1>
<h2>Hi, I’m Madison!</h2>
<h3>I’m a Certified Health Coach and<br>I can't wait to help you!</h3>
<h3 class="has-text-align-center">Madison's Education</h3>(Note: we also fixed the casing because it’s better for accessibility if you don’t type in all caps.)
Tips for ensuring proper heading order
Here are some general guidelines for ensuring that your pages and posts have correct heading order:
- Usually, there should be only 1 H1 on the page. In many cases, your theme should add the page or post title as an H1 tag automatically, in which case any heading you add should start at heading level 2.
- Plan out your heading structure before you start writing. Ensure the title or main idea is an H1 and the most important sections on the page have H2 headings. Then any subsections within the H2 sections can have H3 headings.
- Look at an outline of your headings only and ask yourself in the headings make sense. Would users be able to see (or hear) the heading outline only and understand what the page is about?
- Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy. If you don’t like how the appropriate heading level looks it can be styled to look different with CSS.
- Do not use bold text or all caps instead of a heading. A common accessibility mistake is using bold text or capitalization when a heading is needed. Though the text may look like a heading to sighted users, the underlying code is not set in a way that benefits screen reader users or allows for easier page navigation.
- Do not overuse headings. Most of the time, your page will not need more than H2 and H3 headings. Only on exceptionally long or very complex pages would it be correct to use H5 or H6 headings.
Example of good heading structure
If it is helpful to see an example of heading structure within a page, here is an outline of the headings on this page and their applicable heading levels.
<h1>Incorrect Heading Order</h1>
<h2>Table of Contents</h2>
<h2>About the Incorrect Heading Order Error</h2>
<h3>How are headings correctly structured in HTML?</h3>
<h3>What does the Incorrect Heading Order error mean?</h3>
<h3>How does Accessibility Checker test for incorrect heading order?</h3>
<h2>Impact on Accessibility</h2>
<h3>Why are heading levels important?</h3>
<h3>How incorrect heading order hurts accessibility</h3>
<h3>Relevant WCAG 2.1 Success Criteria</h3>
<h4>1.3.1 Info and Relationships – Level A</h4>
<h4>2.4.1 Bypass Blocks – Level A</h4>
<h4>2.4.6 Headings and Labels – Level AA</h4>
<h4>2.4.10 Section Headings – Level AAA</h4>
<h2>How to Fix an Incorrect Heading Order Error</h2>
<h3>What to do (in short)</h3>
<h3>How to find and fix skipped heading levels on your WordPress posts or pages</h3>
<h3>Tips for ensuring proper heading order</h3>
<h3>Example of good heading structure</h3>
