Headings and Labels.

Proper heading hierarchy lets screen reader users navigate by section

What does this check test?

This check verifies that headings and labels describe the topic or purpose of the content they introduce. Headings must follow a logical hierarchy (h1 > h2 > h3) without skipping levels, and each heading must be descriptive enough that a user scanning only the headings can understand the page structure. Form labels must clearly describe what input is expected. This maps to WCAG 2.2 Success Criterion 2.4.6 (Level AA).

Why does it matter?

Screen reader users navigate primarily by headings — JAWS users report that navigating by headings is their number one strategy for finding information on a page (WebAIM Screen Reader User Survey). When headings are missing, vague (e.g., "Section 1"), or skip levels (h1 to h4), the page becomes a wall of undifferentiated text. A well-structured heading hierarchy is essentially a table of contents for assistive technology users. Similarly, form labels like "Field 1" or missing labels force users to guess what information is required.

Who is affected?

Content authors writing page headings, front-end developers structuring page layouts, UX writers crafting form labels, and CMS template developers ensuring content editors can create proper heading hierarchies. Design system maintainers should provide heading components that enforce hierarchy rules.

Where does this apply?

Every page on the site. Check the heading hierarchy from h1 through h6 — each page should have exactly one h1 (the page title), and subsequent headings should nest logically. All form fields must have visible, descriptive labels. Accordions, tabs, and expandable sections should use headings inside them for navigation. Search results, article listings, and product catalogs need descriptive headings for each item.

How to fix it

<!-- Bad: skipped levels, vague text -->
<h1>Our Store</h1>
<h4>Policy</h4> <!-- skipped h2 and h3 -->

<!-- Good: logical nesting, descriptive text -->
<h1>Product Catalog</h1>
  <h2>Electronics</h2>
    <h3>Laptops</h3>
    <h3>Phones</h3>
  <h2>Clothing</h2>

<!-- Bad: vague label -->
<label for="phone">Phone</label>

<!-- Good: tells the user exactly what to enter -->
<label for="phone">Phone number (including country code)</label>
<input id="phone" type="tel">

References

• WCAG 2.2 — Success Criterion 2.4.6 Headings and Labels
• W3C WAI — Headings Tutorial
• WebAIM — Screen Reader User Survey (heading navigation)