Heading levels should only increase by one

Rule Description

Headings must be in a valid logical order, meaning <h1>-<h6> element tags must appear in a sequentially-descending order.

The Algorithm, in Simple Terms

Ensures the order of headings is semantically correct.

Why this is Important

The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose can be achieved by using different sizes of text. This is not helpful for users of screen readers, though, because a screen reader identifies a header only if it is marked up as such. When headers are properly used, though, the page becomes much easier to navigate for screen reader users and sighted users alike.

In the same way that sighted users can glance at a page and get a sense of its contents, users of screen readers can do the same by navigating through headings. Well written and properly ordered headings can save users, especially those who use screen readers, a lot of time and frustration.

The purpose of headings is to describe the structure of the webpage, not just highlight important text. They should be brief, clear, unique, and marked with an <h1>-<h6> used in hierarchical order. All of these qualities make headings are a valuable tool for users of screen readers. In the same way that sighted users can glance at a page and get a sense of its contents, users of screen readers can do the same by navigating through headings. Well written and properly ordered headings can save users, especially those who use screen readers, a lot of time and frustration.

In addition to making the page more accessible, headings have other benefits, since search engines use headings when filtering, ordering, and displaying results. Improving the accessibility of your site can also have the effect of making your page more findable.

Compliance Data & Impact

User Impact: Minor
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Minor
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

Ensure headings are in a logical order. For example, check that all headings are marked with <h1>-<h6> elements and that these are ordered hierarchically. For example, the heading level following an <h1> should be an <h2>, not an <h3>. Finally, don't use heading mark up on text that isn't actually a heading.

To ensure you are writing effective headings, read through the headings on the page and ask yourself if you get a general sense of the page’s contents based only on the information provided by the headings. If the answer is “no”, consider rewriting your headings. While you are at it, be sure that you are using the heading markup (<h1>-<h6>s) if and only if you are writing a heading. While applying such markup is a quick way to make text stand out, using it for anything other than headings will make navigating a web page more confusing for users of assistive technology.

Example

If you were to create a web page about setting the exposure manually on a camera, you could simplify the steps into an outline as follows:

  • Setting the Exposure Manually on a Camera
    • Set the ISO
    • Choose an aperture
    • Set a shutter speed

You would need to fill in the details of each item in this list, but that's a pretty good overview of the main steps or parts of the process, so we can use these list items as the basis for our heading structure. In this example, the first item would be marked as <h1> and the remaining items would be marked as <h2>:

<h1>Setting the Exposure Manually on a Camera</h1>
      <p>Put text here...</p>
   <h2>Set the ISO</h2>
      <p>Put text here...</p>
   <h2>Choose an aperture</h2>
      <p>Put text here...</p>
   <h2>Choose a shutter speed</h2>
      <p>Put text here...</p>

Best Practice: Start the Main Content with <h1>: Usually the best practice is to start the main content of a web page with a level 1 heading (<h1>), with no other headings before this high level heading. The sub-sections of the page should each be marked as level 2 headings (<h2>). If there are sub-sections within the level 2 sections, they should be marked as level 3 (<h3>) and so on. Anything that comes before the main content of the page probably should not be marked up with any headings at all, though this is not an iron-clad rule. One of the main reasons that the <h1> should appear at the beginning of the main content is because screen reader users can use keyboard shortcuts to navigate directly to the first <h1>, which, in principle, should allow them to jump directly to the main content of the web page. If there is no <h1>, or if the <h1> appears somewhere other than at the start of the main content, screen reader users will have to listen to more of the web page to understand its structure, wasting valuable time.

As with all best practice recommendations, there will be exceptions in which it doesn't make sense to start the content with <h1>, or when it may be best to put other headings before the content, but the exceptions do not apply to the vast majority of web pages.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: heading-order