Headings, Lists, Tables and Labels Under the ADA

What the screen shows, the code must also say

On a clinic booking page, a sighted visitor sees a large bold line and knows it starts a new section. They see three indented lines and know it is a list. They see a grid of times and know the column on the left is the day. A screen reader user gets none of that unless the markup says so.

WCAG 1.3.1 (Level A) requires that information, structure and relationships conveyed through presentation can be programmatically determined or are available in text. The goal is that the meaning survives when the visual layout is replaced by speech, braille or a user style sheet. Where the technology supports real markup, use it rather than describing the structure in a sentence.

Color alone is handled by a different criterion, 1.4.1; this one concerns structure and relationships.

Five things that often only look like something

• Headings: text enlarged with CSS but coded as a paragraph or a div.
• Lists: lines starting with a bullet character or a dash, separated by line breaks.
• Tables: a grid built from divs, or a real table without header cells or a caption.
• Labels and groups: text sitting near an input with no programmatic link, or radio buttons with a question that is not their group name.
• State and meaning: a red asterisk for required, bold for the current page, a highlighted row for selected.

Forms and fee tables on service pages

Public sites are made of forms and tables: a clinic appointment request, a fee schedule for permits, a bus timetable, an agenda with numbered items. DOJ's list of common barriers names inaccessible forms, including unlabeled fields, which is a failure of this criterion in practice. A fee table built from divs reads as a stream of dollar amounts without any hint of which service each belongs to; an agenda built from paragraphs hides how many items there are.

Organizations that rely on page-builder components often discover that the "look" and the "structure" were set in different places. If the template emits the wrong element, every page that uses it inherits the problem. See the overview of common barriers for how this pairs with other recurring issues.

Web examples: appointments, timetables and agendas

Give each field a label that is programmatically tied to it, and put related radio buttons in a group with a name.

<div class="field">Preferred clinic</div>
<input type="text" name="clinic">

<div class="field">Visit type</div>
<input type="radio" name="vt" value="new"> New patient
<input type="radio" name="vt" value="follow"> Follow-up

<label for="clinic">Preferred clinic</label>
<input id="clinic" name="clinic" type="text">

<fieldset>
  <legend>Visit type</legend>
  <label><input type="radio" name="vt" value="new"> New patient</label>
  <label><input type="radio" name="vt" value="follow"> Follow-up</label>
</fieldset>

A timetable is a table. Header cells say whether a value is a stop or a departure time.

<div class="row">
  <span>Stop</span><span>Route 12</span><span>Route 40</span>
</div>
<div class="row">
  <span>Library</span><span>8:10</span><span>8:25</span>
</div>

<table>
  <caption>Weekday departures from Main Street</caption>
  <thead>
    <tr><th scope="col">Stop</th>
        <th scope="col">Route 12</th>
        <th scope="col">Route 40</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Library</th><td>8:10</td><td>8:25</td></tr>
  </tbody>
</table>

Headings and lists carry the outline that screen reader users navigate by.

<p class="big bold">Agenda</p>
<p>1. Call to order<br>
2. Public comment<br>
3. Parking ordinance</p>

<h2>Agenda</h2>
<ol>
  <li>Call to order</li>
  <li>Public comment</li>
  <li>Parking ordinance</li>
</ol>

Native apps: headings and groups

Native toolkits have the same idea under different names. A large title text is not a heading unless you mark it as one.

Text("Water bill")
    .font(.title)

Text("Water bill")
    .font(.title)
    .accessibilityAddTraits(.isHeader)

Text(
    "Water bill",
    style = MaterialTheme.typography.headlineMedium
)

Text(
    "Water bill",
    style = MaterialTheme.typography.headlineMedium,
    modifier = Modifier.semantics { heading() }
)

How to check it

1. Turn off the page's CSS (or use a reader mode). Does the structure still read as headings, lists and tables?
2. With a screen reader, open the headings list, the landmarks list and the form fields list. Each should make sense on its own.
3. Move into a table cell. The screen reader should announce its row and column headers.
4. Tab into a group of radio buttons. The group's name should be spoken before the option.
5. Inspect the elements. If the thing looks like a heading but the tag is a div, it fails.

Automated tools find unlabeled inputs and empty headers; they cannot tell that a bold paragraph is a heading in disguise.

Mistakes to retire

• Layout tables used for data, and div grids used for tables.
• Skipping heading levels or choosing a level for its size instead of its place in the outline.
• A placeholder as the only label.
• Bullets typed as characters.
• Conveying "required" with a colored asterisk that is not in the label text.

Ship it when

• Every visual heading, list, table and form group is coded as one.
• Every form field has a programmatic label.
• State shown visually (required, current, selected) is also available in text or attributes.

Sources

• Understanding SC 1.3.1: Info and Relationships (W3C), opens in a new tab
• H39: Using caption elements to associate data table captions with data tables (W3C), opens in a new tab
• H71: Providing a description for groups of form controls using fieldset and legend elements (W3C), opens in a new tab
• H43: Using id and headers attributes to associate data cells with header cells in data tables (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.