Headings, labels and the ADA

Words that orient

Headings let people scan, and let screen reader users jump from section to section. Labels tell people what to type or choose. If three fields are all labelled "Date", or sections are titled "Information" and "Other", people have to guess.

Success Criterion 2.4.6 says headings and labels describe topic or purpose. It applies only if headings or labels exist; it does not require you to add them. A short word can pass if it is an appropriate cue, and an icon can work as a label when its meaning is commonly understood in context, such as a magnifying glass next to a search field.

Related criteria cover other parts: 1.3.1 for correct markup, 3.3.2 for labels on inputs, and 4.1.2 for how names are exposed. This one is about the words.

Vague labels in public forms

• Incident report forms with several fields called "Date" or "Description".
• Enrollment pages with headings like "Welcome", "Next" and "Final".
• Dialogs labelled "Dialog" or "Message".
• Buttons labelled "Go" or "OK" with no hint of what happens.

The people affected include those who navigate by headings or by a list of form fields, and anyone filling in a form for a service they only use once a year.

Say which date

When a form has several fields of the same type, each label has to say which one it is.

<label for="d1">Date</label> <input id="d1" type="date">
<label for="d2">Date</label> <input id="d2" type="date">
<label for="d3">Date</label> <input id="d3" type="date">

<label for="d1">Date of incident</label> <input id="d1" type="date">
<label for="d2">Date you noticed the damage</label> <input id="d2" type="date">
<label for="d3">Preferred inspection date</label> <input id="d3" type="date">

Headings that say something

A heading should describe what follows, in words a resident would use.

<h2>Welcome!</h2>
<h2>Next</h2>
<h2>Final</h2>

<h2>Who can enroll</h2>
<h2>Documents to bring</h2>
<h2>Deadlines and fees</h2>

Dialog titles and button text

A dialog's name should be its heading, and a button should say what it does.

<dialog aria-label="Dialog">
  <p>Cancel reservation?</p>
  <button>Go</button>
</dialog>

<dialog aria-labelledby="dlg-title">
  <h2 id="dlg-title">Cancel your reservation</h2>
  <button type="button">Yes, cancel reservation</button>
  <button type="button">Keep reservation</button>
</dialog>

Labels and section titles in apps

SwiftUI:

Form {
    TextField("Info", text: $incidentDate)
}

Form {
    Section("Incident details") {
        TextField("Date of incident", text: $incidentDate)
    }
}

Jetpack Compose:

OutlinedTextField(
    value = date, onValueChange = { date = it },
    label = { Text("Field") }
)

Text("Incident details", Modifier.semantics { heading() })
OutlinedTextField(
    value = date, onValueChange = { date = it },
    label = { Text("Date of incident (MM/DD/YYYY)") }
)

How to check it

1. List the headings with a screen reader or browser extension. Read them as an outline: does each one say what its section covers?
2. List the form fields. Read the labels alone: can you tell which field is which?
3. Read button and dialog text out of context.
4. Check that the label shown on screen matches the name a screen reader reads.

A tool can tell you that a label exists. Only a person can tell you whether it makes sense.

Mistakes and a ship-it list

• Using the same label text for different fields.
• Relying on layout to explain a field, while the label stays generic.
• Choosing headings for how they look instead of what they say.
• Icon-only buttons whose meaning is not commonly understood.

Ship it when each heading, field label and button, read on its own, describes its topic or purpose. Forms are a good place to start the review.

See WCAG 2.1 AA and the ADA.

Sources

• Understanding SC 2.4.6: Headings and Labels (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.