Ensure the order of headings is semantically correct

The heading-order rule checks that heading elements (<h1> through <h6>) are used in a logical, hierarchical order. Headings help organize page content and improve navigation for screen reader users.

What is being tested?

The rule verifies that headings are:

• Marked with proper heading tags (h1 through h6).
• Ordered hierarchically (for example, an h2 follows an h1, not an h3).
• Used only for actual headings, not just to style important text.

Correct markup example

<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 practices

• Start the main content with a single <h1>.
• Use <h2> for major sections and <h3> for subsections, continuing down to <h6> if needed.
• Apply heading tags only to headings, not to regular or decorative text.
• Ensure that heading text is brief, clear, and meaningful.

Why it matters

Headings convey the page structure to both sighted and screen reader users. Sighted users often rely on visual cues like text size, but screen reader users depend on proper heading markup to navigate quickly.

Correctly ordered headings improve accessibility and usability and also benefit search engine optimization (SEO), as search engines use headings when indexing, filtering, and ranking pages.

Well-structured headings allow all users to get a quick overview of the page’s content and save time navigating to the sections that matter to them.