Heading levels should only increase by one
Headings must be in a valid logical order, meaning
h6 element tags must appear in a sequentially-descending order.
Why it Matters
The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose is achieved using different sizes of text. Text size, however, is not helpful for users of screen readers, because a screen reader identifies a header only if it is properly marked-up. When heading elements are applied correctly, 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
h6 elements applied in hierarchical order. All of these qualities make headings valuable tools for screen reader users. Similar to the way sighted users can glance at a page and get a sense of its contents, screen reader users can navigate through headings. Well written and properly ordered headings can save screen reader 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.
How to Fix the Problem
Ensure headings are in a logical order. For example, check that all headings are marked with
h6 elements and that these are ordered hierarchically. For example, the heading level following an
h1 element should be an
h2 element, not an
h3 element. 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 (
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.
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 element and the remaining items would be marked as
<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 a
Usually, the best practice is to start the main content of a web page with a level 1 heading element (
h1), with no other headings before this high-level heading. Markup the sub-sections of the page as level 2 heading elements (
h2). If there are sub-sections within the level 2 sections, mark these sections as level 3 heading elements (
h3) and so on. Anything that comes before the main content of the page 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 element 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 element, which, in principle, should allow them to jump directly to the main content of the web page. If there is no
h1 element, or if the
h1 element appears somewhere other than at the start of the main content, screen reader users will have to listen to additional web page content to understand the page 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.
The Algorithm (in simple terms)
Ensures the order of headings is semantically correct.