Headings and Labels

Who this affects

Screen reader users navigating by heading. Users with cognitive disabilities scanning for the section they need. A heading reading "Information" tells nobody anything.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<!-- FAILURE 1: headings that describe nothing. Pulled into a screen reader's
     heading list they read: "Information, More, Details, Other" - which tells
     a user nothing about where to go.

     Note that all of these ARE real heading elements, so 1.3.1 passes. 2.4.6
     is about whether the text is any good. -->
<h1>Information</h1>

<h2>More</h2>
<p>We deliver across the county on Tuesdays and Fridays.</p>

<h2>Details</h2>
<p>Reservations are held for seven days.</p>

<h2>Other</h2>
<p>Our Riverside shop has step-free access and a hearing loop.</p>

<!-- FAILURE 2: labels that do not say what to enter. "Field 1" and "Value"
     are labels in the technical sense and useless in the practical one. -->
<h2>Form</h2>
<form>
  <div class="field">
    <label for="a">Field 1</label>
    <input type="text" id="a">
  </div>
  <div class="field">
    <label for="b">Value</label>
    <input type="text" id="b">
  </div>
  <div class="field">
    <label for="c">Date</label>
    <input type="text" id="c">
  </div>
  <button type="submit" class="button">Submit</button>
</form>

<!-- FIX 1: headings that work as an outline on their own. Read just the
     headings: "Visiting Riverline Books / Delivery days / How long we hold a
     reservation / Access at our Riverside shop". You know exactly where to go
     without reading a single paragraph. That is the test. -->
<h1>Visiting Riverline Books</h1>

<h2>Delivery days</h2>
<p>We deliver across the county on Tuesdays and Fridays.</p>

<h2>How long we hold a reservation</h2>
<p>Reservations are held for seven days.</p>

<h2>Access at our Riverside shop</h2>
<p>Our Riverside shop has step-free access and a hearing loop.</p>

<!-- FIX 2: labels that name the specific thing being asked for. -->
<h2>Reserve a book</h2>
<form>
  <div class="field">
    <label for="a">Book title</label>
    <input type="text" id="a">
  </div>
  <div class="field">
    <label for="b">Your membership number</label>
    <input type="text" id="b">
  </div>
  <div class="field">
    <label for="c">Date you would like to collect it</label>
    <input type="text" id="c">
  </div>
  <button type="submit" class="button">Reserve this book</button>
</form>

<!-- Two things 2.4.6 does NOT require:
     - it does not require headings to exist at all (that is 2.4.10 at AAA)
     - it does not require a visible label for every control (that is 3.3.2)
     It only says that the headings and labels you DO have must describe the
     topic or purpose.

     A useful review technique: extract every heading into a flat list and read
     it aloud. If it does not work as a table of contents, the headings fail. -->

How to test it

Read the headings alone as an outline — it should summarise the page. Read the form labels alone — each should identify what to enter. Look for vague labels and for headings chosen for visual size rather than meaning.

• Automated

  Empty headings and unlabelled fields are caught. Whether a heading is descriptive is a human judgement.

  This demo's failure is not machine-detectable. Every heading on the failing page is a real heading element with real text, and every field has a properly associated label - so axe reports a clean page. Whether "Information" and "Field 1" actually DESCRIBE anything is a judgement about meaning, and no scanner makes it. This is the clearest example in the suite of a page that is 100% green and unusable.

  Relevant axe rules:

  • empty-heading
  • heading-order
  • label

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.3.1 Info and Relationships (Level A)
• 2.4.10 Section Headings (Level AAA)
• 3.3.2 Labels or Instructions (Level A)

In the specification

• Understanding 2.4.6 Headings and Labels — the W3C explanation, intent and exceptions
• 2.4.6 in the WCAG 2.2 Recommendation — the normative wording