2.4.6 Headings and Labels

Level: AA | Principle: Operable | Since: WCAG 2.0 | Automation: Partial (axe-core)

What This Means

Headings and labels must describe the topic or purpose of the content they introduce. An empty heading, a vague heading like "Section 1", or a form label that says "Field" provides no useful information.

Who This Affects

Screen reader users — they navigate by headings to find content quickly
Cognitive disability users — clear headings help them understand page structure
Everyone — descriptive headings improve scannability

Common Pitfalls

1. Empty headings

<!-- Bad: heading with no content -->
<h2></h2>

<!-- Bad: heading with only whitespace -->
<h2>   </h2>

2. Vague headings

<!-- Bad -->
<h2>More Info</h2>
<h2>Details</h2>
<h2>Section 1</h2>

<!-- Good -->
<h2>Shipping and Returns Policy</h2>
<h2>Payment Methods</h2>
<h2>Customer Reviews</h2>

3. Vague form labels

<!-- Bad -->
<label for="field1">Input</label>
<label for="field2">Field</label>

<!-- Good -->
<label for="first-name">First name</label>
<label for="email">Email address</label>

How to Fix

Every heading should answer: "What is this section about?" Every label should answer: "What should the user enter here?"

<!-- Descriptive headings -->
<h1>A11y Scan Documentation</h1>
<h2>Getting Started</h2>
<h3>Installing the Extension</h3>
<h3>Running Your First Scan</h3>
<h2>Understanding Results</h2>

<!-- Descriptive labels -->
<label for="company">Company name</label>
<input id="company" type="text">

<label for="employees">Number of employees</label>
<select id="employees">
  <option>1-10</option>
  <option>11-50</option>
</select>

How to Test

Open a screen reader and list all headings on the page (VoiceOver: VO+U then Headings; NVDA: H key to cycle through headings).
Read each heading and verify it clearly describes the content of its section (not vague like "More Info" or "Section 1").
Tab to each form field and verify the announced label describes what to enter (not generic like "Input" or "Field").
Check for empty headings by inspecting the DOM for <h1>-<h6> elements with no text content or only whitespace.
Pass: Every heading describes its section's topic, every label describes the expected input, and no empty headings exist.
Fail: Any heading is empty, vague, or misleading, or any form label fails to describe what the user should enter.

axe-core Rules

| Rule | What It Checks | |------|---------------| | empty-heading | Headings must not be empty |

Note: axe-core can detect empty headings but cannot judge whether heading text is descriptive — that requires manual review.

Tools

Test this criterion with the Heading Structure Checker.