Perceivable · 1.3 Adaptable
Structure and relationships shown visually, such as headings, lists, tables, form labels and grouped fields, must be expressed in code so assistive technology can determine them, or else be stated in the text itself.
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.
Look at the headings and fields views in each version. The failing version looks the same but has no headings, no list and fields without names.
The tools follow the version you last used.
What happened
Why it passes
A screen reader finds two headings, a list of two items and a name for every field. The two delivery options are read as one group called Delivery speed.
Why it fails
It looks the same, but the headings and the list are only styled text. The fields have no names, so a screen reader announces the text boxes and radio buttons without saying what to enter or choose.
Examples
Five 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
<p class="big-bold">Your statements</p><p>Download a statement for any month in the last seven years.</p><p class="big-bold">Direct debits</p><p>See and cancel the payments you have set up.</p>The titles only look like headings. In the code they are paragraphs, so screen reader users cannot list them or jump between sections (failure F2).
Passes
Live preview
<h2>Your statements</h2><p>Download a statement for any month in the last seven years.</p><h2>Direct debits</h2><p>See and cancel the payments you have set up.</p>The h2 elements expose each title as a level 2 heading, so it appears in the screen reader's list of headings (technique H42).
Fails
Live preview
<table> <tr><td><b>Date</b></td><td><b>Description</b></td><td><b>Amount</b></td></tr> <tr><td>Mar 3</td><td>Card payment, Green Grocers</td><td>-$24.60</td></tr> <tr><td>Mar 5</td><td>Salary</td><td>$2,150.00</td></tr></table>The top row is bold but made of ordinary td cells, so a screen reader reads each amount without telling the user which column it belongs to.
Passes
Live preview
<table> <caption>Recent transactions</caption> <tr><th scope="col">Date</th><th scope="col">Description</th><th scope="col">Amount</th></tr> <tr><td>Mar 3</td><td>Card payment, Green Grocers</td><td>-$24.60</td></tr> <tr><td>Mar 5</td><td>Salary</td><td>$2,150.00</td></tr></table>The th cells with scope="col" tie every data cell to its column header, and the caption names the table (techniques H51 and H63).
Passes
Live preview
<fieldset> <legend>Delivery speed</legend> <input type="radio" id="standard" name="speed" value="standard" checked> <label for="standard">Standard, 3 to 5 days</label> <input type="radio" id="express" name="speed" value="express"> <label for="express">Express, next day</label></fieldset>Each option has its own label and the legend names the group, so screen readers announce the question together with the options (technique H71).
Why it matters
Screen reader users rely on programmatic headings, lists, table headers and labels to understand and navigate what sighted users grasp from the visual layout.
W3C: Understanding 1.3.1Level A
Level A is the minimum: failing it can shut some people out completely.
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