Operable · 2.4 Navigable
Headings and labels, where present, must describe the topic or purpose of the content they introduce or the input they identify. The criterion does not require headings or labels to exist, only that the ones used are descriptive.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Open the headings view, then read the whole form. Decide whether each label alone tells you what to type.
The tools follow the version you last used.
What happened
Why it passes
The headings say what each part of the form is for, and each label says exactly what to type, so a screen reader user moving by heading or by field always knows where they are.
Why it fails
Section 1 and Section 2 say nothing about their content, and labels such as Number and Value leave people guessing which number or value the bank wants.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<h2>Section 1</h2><p>Your new card will arrive within five working days.</p><h2>Section 2</h2><p>You can freeze your card at any time in the app.</p>The headings exist but do not describe their sections, so people scanning the page or jumping by heading cannot tell which part covers delivery and which covers freezing a card.
Passes
Live preview
<h2>When your new card arrives</h2><p>Your new card will arrive within five working days.</p><h2>Freezing your card</h2><p>You can freeze your card at any time in the app.</p>Each heading says what its section is about, so the list of headings works as a summary of the page (technique G130).
Fails
Live preview
<label for="f1">Field</label><input id="f1" type="text"><label for="f2">Value</label><input id="f2" type="text">The fields have properly associated labels, but Field and Value do not tell anyone what information is wanted.
Passes
Live preview
<label for="card-name">Name on card</label><input id="card-name" type="text" autocomplete="cc-name"><label for="expiry">Expiry date (MM/YY)</label><input id="expiry" type="text" autocomplete="cc-exp" inputmode="numeric">Each label says what to enter, and the expiry label shows the expected format, so people know what to type before they start (technique G131).
Why it matters
Clear headings let screen reader and keyboard users scan and navigate a page quickly, and descriptive labels help everyone, especially people with cognitive or learning disabilities, understand what each field expects.
W3C: Understanding 2.4.6Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures