WCAG 9.1 — On every web page, is information structured through appropriate use of headings?

Poorly structured heading hierarchy

The issue

The heading hierarchy (h1 to h6) is the backbone of page structure for assistive technologies. WCAG success criterion 1.3.1 requires that headings be used in a relevant and hierarchically consistent manner to structure information. Screen reader users heavily rely on headings to navigate a page: they use keyboard shortcuts (H key in JAWS and NVDA) to jump from heading to heading and browse the page like a table of contents. The most common heading structure problems are numerous. Missing h1 deprives the page of its main title. Multiple h1s create confusion about the page's main topic. Level skips (going from h2 to h4 without h3) break the logical hierarchy and disorient the user. Using headings for purely visual purposes (an h3 used because the font size suits, not because the content is a level-3 subtitle) produces an inconsistent semantic structure. Missing headings are also an issue: an important content section without a heading does not appear in the screen reader's heading navigation and may be completely overlooked. CMSs like WordPress often generate heading hierarchy problems when content authors use heading levels for visual formatting rather than structure. An article whose content jumps from h2 to h5 because the author wanted smaller text is a typical example. The solution involves educating contributors and implementing content templates that guide heading structuring.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

Screen reader users navigate web pages as if they were structured documents. They display the heading list (shortcut Insert+F7 in JAWS) and jump directly to the heading that interests them. If the hierarchy is inconsistent, this navigation becomes impossible. A jump from h2 to h5 makes the screen reader (and user) believe intermediate sections are missing. A missing h1 deprives the user of information about the page's main topic. Headings used for styling create noise that drowns out the real section headings. Search engines also use heading hierarchy to understand content structure. A well-written h1 and consistent hierarchy improve SEO. People with cognitive disabilities also benefit from clear structure: headings allow them to quickly scan content and find relevant information without reading the entire page.

Code example

Before (non-compliant)
<div class="page">
  <!-- No h1 -->
  <h3>Our services</h3>
  <p>Services description...</p>
  <h5>Consulting</h5>
  <p>Consulting description...</p>
  <h2>About</h2>
  <h4>Our team</h4>
  <p>Team description...</p>
</div>
After (compliant)
<div class="page">
  <h1>Accessibility consulting agency</h1>
  <h2>Our services</h2>
  <p>Services description...</p>
  <h3>Consulting</h3>
  <p>Consulting description...</p>
  <h2>About</h2>
  <h3>Our team</h3>
  <p>Team description...</p>
</div>

Frequently Asked Questions

Can I have multiple h1s on the same page?
WCAG does not explicitly prohibit it, but best practice is to have a single h1 per page that describes the main topic. The HTML5 specification introduced the possibility of multiple h1s within sectioning elements (article, section) but this feature was never implemented by screen readers and is now discouraged.
Can I skip a heading level (h2 then h4)?
No. Best practice requires a consistent heading hierarchy without level skips. After an h2, the next lower-level heading should be an h3, not an h4 or h5. Level skips disorient screen reader users who expect a logical structure. If you want smaller text, use CSS to change the size, not a lower heading level.
How do I style a heading without changing its level?
Use CSS to control the visual appearance of headings independently of their semantic level. For example, an h2 can be visually styled to look like an h4 with a CSS class: <h2 class="text-lg">Title</h2>. The semantic level (h2) remains correct for structure, while the CSS class controls the visual size and style.
Do visually hidden headings count in the hierarchy?
Yes. A visually hidden heading with the sr-only class is invisible on screen but is part of the heading hierarchy for screen readers. This is a useful technique for adding section headings that are visually missing (for example, a 'Main navigation' heading above the menu). These hidden headings must respect the hierarchy like visible headings.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit