2.4.6 Headings and Labels

Who it helps

Screen reader users jump between headings and form fields, so vague text leaves them guessing. People with cognitive disabilities and anyone skimming a page find content faster with descriptive headings and labels.

How to meet it

• Write each heading so it tells you what the section below it covers.
• Make each form label say exactly what to enter, such as "Work email" instead of "Email 2".
• Keep headings and labels short, and put the most important words first.
• Avoid giving sections or fields the same text unless they really cover the same thing.
• Read the headings alone, in order, and check that they outline the page.

Examples

<h2>Section 1</h2>
<p>Our plans start at $12 per month...</p>
<h2>More info</h2>
<p>You can cancel at any time from Settings...</p>

<label for="f1">Field 1</label>
<input id="f1" type="text">
<label for="f2">Date</label>
<input id="f2" type="text">

<h2>Pricing</h2>
<p>Our plans start at $12 per month...</p>
<h2>How to cancel your plan</h2>
<p>You can cancel at any time from Settings...</p>

<label for="f1">Company name</label>
<input id="f1" type="text" autocomplete="organization">
<label for="f2">Delivery date (MM/DD/YYYY)</label>
<input id="f2" type="text">

Common mistakes

• Using catchy or clever headings that hide what the section is about.
• Repeating the same heading, such as "Details", for several different sections.
• Giving two different fields the same label, such as two fields both labeled "Email".
• Labeling fields with internal codes or abbreviations users may not know.

Related criteria

• 1.3.1 Info and Relationships
• 2.4.2 Page Titled
• 3.3.2 Labels or Instructions
• 2.4.10 Section Headings

Official W3C explanation of 2.4.6