ibin
Usually moderate2 minute read

Keep headings in a logical order

Use headings to create a clear content outline instead of choosing levels for their visual size.

Why it matters

Skipped heading levels can make sections and subsections harder to understand and navigate.

How to fix it

  1. Use one clear page heading for the main topic.

  2. Put section headings below it and nest subsections one level deeper.

  3. Change the visual size with CSS rather than selecting the wrong heading level.

Example

Before
<h1>Our services</h1>
<h3>Accessibility audits</h3>
After
<h1>Our services</h1>
<h2>Accessibility audits</h2>

How to check your fix

Check your page again with ibin. The issue disappears from your report once every place is fixed. Then try it yourself the way a visitor would.

  • Check the page again and make sure the issue no longer shows up in your report.
  • Try the fixed part yourself: with a mouse, with only a keyboard, and zoomed in.
  • If you can, ask someone who uses a screen reader to try it too.
For your developer

Standards: —

heading-order · Background information (in English)

Also available in Nederlands, Français, Deutsch