Skipped heading level
headings/skip-level
- WCAG success criterion
- 1.3.1 (level A)
- Outcome class
- Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
- Area
- Accessibility, Structure & Semantics
- Default severity
- medium
- axe-core rule
headings/skip-level
Why we flag this
Screen reader users navigating by headings assume that sections are missing.
Heading levels do not follow each other without gaps.
What the rule checks
Scope. Rendered headings in document order, from the second heading on.
Expectation. Flags a heading whose level is more than one deeper than the previous rendered heading (h2 followed by h4), at that heading. Going back up any number of levels (h3 to h1) or one level down is fine; the first heading may have any level. Hidden headings (display:none) are not part of the outline, so a hidden h5 between two h3 is no skip. Skipping levels is not a WCAG failure (G141 is advisory), so the finding is a best-practice violation without a success criterion.
Source. Best practice, no WCAG failure: G141 and H42 (advisory) for SC 1.3.1/2.4.10; axe heading-order
Detection: shared; needs dom, computed_style.
Failing example
The check flags this for review. Corpus case heading_order. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Heading order corpus case</title>
</head>
<body>
<main>
<h1>Top level heading</h1>
<h3>Skipped from h1 to h3</h3>
<p>Some content.</p>
</main>
</body>
</html>Passing example
The check passes here and reports nothing. Corpus case structure_outline_clean. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en" xml:lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Opening hours and contact – Acme Hardware Berlin</title>
<style>
body { font: 16px/1.5 sans-serif; margin: 0 16px; }
a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; }
input, button { min-width: 44px; min-height: 44px; }
</style>
</head>
<body>
<!-- Conforming look-alike for the structure rules (#783): every
structure the rules look at is present and correct. -->
<a href="#main" class="skip-link">Skip to content</a>
<header>
<p>Acme Hardware</p>
</header>
<nav aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/shop/">Shop</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
<main id="main">
<h1>Opening hours and contact</h1>
<p>Our store in Berlin is open six days a week. We are happy to help you
find the right tool for your project, and you can always call us before
you visit to check that an item is in stock.</p>
<h2>Opening hours</h2>
<dl>
<div><dt>Monday to Friday</dt><dd>8:00 to 18:00</dd></div>
<div><dt>Saturday</dt><dd>9:00 to 14:00</dd></div>
</dl>
<h2>Directions</h2>
<!-- English text with German proper names: names are exempt from
3.1.2, and only two German function words occur. -->
<p id="directions">The store is a short walk from the Haus der Kunst gallery and the
old bridge that locals call die Brücke. Take the tram to the main square, then
follow the river for about five minutes until you see our green sign.</p>
<article>
<h3>Store news</h3>
<p>We now stock garden tools from local makers.</p>
</article>
<section aria-labelledby="contact-heading">
<h2 id="contact-heading">Contact</h2>
<p>Call us or send a message. Prices include <abbr title="value-added tax">VAT</abbr>.</p>
<form action="/contact" method="post">
<label for="contact-email">E-mail</label>
<input id="contact-email" name="email" type="email" autocomplete="email" aria-describedby="contact-hint">
<p id="contact-hint">We reply within one working day.</p>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>Acme Hardware, Berlin</p>
</footer>
<!-- Hidden leftover outside every landmark: not rendered, not content. -->
<div hidden>Summer sale banner</div>
</body>
</html>This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.