2.4.6 Headings and Labels

What this rule means

WCAG 2.4.6 requires that when headings and labels are used, they must be descriptive — clearly indicating the topic of the section or the purpose of the form control. This criterion does not require the presence of headings or labels (that is covered by other criteria), but when they exist, they must be meaningful.

A heading like "Section 1" or a label like "Field" does not describe topic or purpose. Headings should summarize the content that follows, and labels should tell users exactly what information is expected in a form field.

Why it matters

Screen reader users navigate by headings to quickly scan page structure and find relevant sections. When headings are vague or generic, users cannot efficiently locate the content they need. Similarly, unclear form labels force users to guess what information is required, leading to errors and frustration.

Descriptive headings and labels also help users with cognitive disabilities understand page organization, support low-vision users who use screen magnifiers and see only a small portion of the page at a time, and improve overall usability for everyone.

Related axe-core rules

• page-has-heading-one — Ensures the page or at least one of its frames contains a level-one heading.

How to test

1. Use a screen reader heading navigation (e.g., NVDA: H key) to browse all headings. Verify each heading describes the section content.
2. Review all form labels to confirm they clearly describe the expected input.
3. Run axe-core to check for page-has-heading-öne and any empty heading violations.
4. Check that heading levels form a logical hierarchy (h1 > h2 > h3) without skipping levels.

• Verify that headings are not used solely for visual styling — use CSS instead of heading elements for non-structural emphasis.

How to fix

Write headings that summarize the section content and labels that clearly identify the expected input.

Descriptive headings

<!-- Bad: Generic or vague headings -->
<h1>Welcome</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h2>More Info</h2>

<!-- Good: Descriptive, topic-specific headings -->
<h1>WCAG 2.4.6 Headings and Labels</h1>
<h2>What This Rule Means</h2>
<h2>How to Write Effective Headings</h2>
<h2>Form Label Best Practices</h2>

Descriptive form labels

<!-- Bad: Vague labels -->
<label for="field1">Input</label>
<input id="field1" type="text">

<label for="field2">Enter value</label>
<input id="field2" type="text">

<!-- Good: Descriptive labels -->
<label for="email">Email address</label>
<input id="email" type="email" autocomplete="email">

<label for="phone">Phone number (optional)</label>
<input id="phone" type="tel" autocomplete="tel">

Group labels with fieldset and legend

<fieldset>
  <legend>Notification preferences</legend>
  <label>
    <input type="checkbox" name="notify" value="email">
    Email notifications
  </label>
  <label>
    <input type="checkbox" name="notify" value="sms">
    SMS notifications
  </label>
</fieldset>

Common mistakes

• Using headings like "Introduction", "Section 1", or "Details" that do not describe the actual topic.
• Using identical headings for different sections on the same page.
• Form labels that say "Input", "Field", or "Enter data" without specifying what data is expected.
• Using placeholder text as the only label — placeholders disappear on input and are not reliably read by all screen readers.
• Skipping heading levels (e.g., jumping from h1 to h3) which breaks the logical document outline.
• Using heading elements purely for visual styling rather than structural organization.