Operable Guideline 2.4 Navigable

2.4.6 Headings and Labels

Headings and labels must say what they are for

Level AA Needs a person to check

What it asks for, in plain English

Where a page has headings, each one should describe the section underneath it. Where a form has labels, each one should describe what goes in the field. 'Overview', 'Details' and 'More' tell nobody anything; 'Delivery options', 'Allergens' and 'Your address' do.

This criterion does not require headings or labels to exist (1.3.1 covers using the right markup, and 3.3.2 covers having labels). It is about the words: when a heading or label is there, it has to be useful.

Good headings let people skim a page and jump to the right part. Good labels let people fill a form without reading the surrounding text.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.6 page has the full intent, techniques and definitions.

Who it affects

Someone using a screen reader jumps through the headings list and hears 'Section 1, Section 2, Section 3', which helps no more than no headings at all.

A person with a cognitive impairment reads a label that says 'Reference' and does not know which of their three reference numbers to type.

Anyone skimming a long article uses the headings as a map, and vague headings leave them lost.

Example

Broken

Two sections, both called some flavour of information, and a field asking for a number of what?

Fixed

Now the headings list reads 'Delivery times, Returns' and the field says exactly what to type.

Show the markup behind both examples
Broken
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}h2{font-size:17px;margin:0 0 4px}p{margin:0 0 12px;color:#374151}label{display:block;margin:0 0 4px}input{padding:5px;border:1px solid #6b7280;border-radius:4px}</style>
<h2>Information</h2><p>Orders placed before 2pm are posted the same day.</p>
<h2>More information</h2><p>Returns are free within 30 days.</p>
<label for="r">Number</label><input id="r">
Fixed
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}h2{font-size:17px;margin:0 0 4px}p{margin:0 0 12px;color:#374151}label{display:block;margin:0 0 4px}input{padding:5px;border:1px solid #6b7280;border-radius:4px}</style>
<h2>Delivery times</h2><p>Orders placed before 2pm are posted the same day.</p>
<h2>Returns</h2><p>Returns are free within 30 days.</p>
<label for="r">Order number</label><input id="r">

How to check it

  1. With a screen reader, open the headings list (VoiceOver rotor, or H in NVDA). Read it as a table of contents. Could you find a topic from it?
  2. Read each heading on the page and ask whether it describes what follows.
  3. Read each form label on its own, without the hint text. Would you know what to type?
  4. Look for repeated headings or labels on the same page that mean different things.

What Websight checks for 2.4.6

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Websight flags headings that are empty and heading levels that skip, which are markup problems. Whether the words in a heading or label describe their content needs a person.

Practical tips

  • Write the heading as the answer to 'what is this section about?' in two to five words.
  • Front-load the key word: 'Delivery times', not 'Information about when we deliver'.
  • If a label needs a hint to be understood, put the key noun in the label and the extra in the hint.

Scan your page and see where 2.4.6 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.