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
Use one clear page heading for the main topic.
Put section headings below it and nest subsections one level deeper.
Change the visual size with CSS rather than selecting the wrong heading level.
Example
<h1>Our services</h1> <h3>Accessibility audits</h3>
<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