Page Title: Logical Heading Order Accessibility Guide
Rule ID: heading-order
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: Deque Best Practice
How to Fix the Problem
Ensure that headings on your web pages are used in a hierarchical, sequentially descending order to reflect the structure of the content. Use HTML heading tags (<h1> through <h6>) properly:
-
Begin your main content with an
<h1>tag. This should represent the primary purpose of the page. -
Follow with
<h2>tags for major sections,<h3>for sub-sections within those sections, and so on. -
Do not skip heading levels (e.g., from
<h1>to<h3>) unless there’s a clear structural reason. -
Do not use heading tags purely for visual styling; they must convey content structure.
Example:
Best Practices:
-
Always start the main content with an
<h1>element. -
Use heading levels consistently and logically.
-
Avoid using headings in page headers, footers, or navigation bars unless they are part of the main content hierarchy.
-
Refrain from marking up non-heading content (like call-to-actions or stylized text) with heading tags.
A good test is to read only the headings of a page: if you can understand the outline or intent of the content, the headings are likely well-structured.
Why it Matters
Headings serve as the navigational backbone for both screen reader users and sighted users:
-
Screen readers rely on properly ordered heading tags to build a meaningful outline of the page. If heading levels are skipped or misused, screen reader users may become disoriented.
-
Proper heading structure helps all users understand the relationships between content sections, improving usability and readability.
-
For screen reader users, heading navigation allows jumping directly to the content of interest, improving efficiency and reducing cognitive load.
-
Correct heading order is also beneficial for SEO, as search engines use heading tags to index and rank content relevance.
Incorrectly ordered or misused headings degrade the user experience and hinder content accessibility and discoverability.
Rule Description
Headings must be presented in a valid and logical order, where heading tags (<h1> to <h6>) are used to reflect the content hierarchy without skipping levels or misrepresenting structure.
The Algorithm (in simple terms)
Check the DOM to:
-
Identify all elements with heading tags (
<h1>–<h6>). -
Ensure that each heading appears in a logically descending order.
-
Prevent skips in levels unless justified by the document’s actual content structure.