Form labels and instructions and the ADA

Making clear what to type

A field with no label, or a label that vanishes when you start typing, forces people to guess. WCAG 2.1 success criterion 3.3.2 says that labels or instructions are provided when content requires user input. In the Understanding document, "requires" is read loosely: optional fields count too, because they also accept input.

• Every control needs a label, and each option in a radio group, checkbox set or combo box needs its own.
• If the input has an unusual or strict format, say so in an instruction.
• Long instructions can appear only when the field is focused, as long as people can still get to them.
• Too much text is also a barrier, so aim for enough information, not all of it.

What lives next door

Whether a label is correctly coded and linked belongs to 1.3.1, the accessible name to 4.1.2, and whether the wording is clear to 2.4.6. This criterion asks the simpler question: is there something there that tells a person what to enter?

The ADA angle: unlabeled fields and unclear instructions

DOJ's guidance lists inaccessible forms among common barriers, naming unlabeled fields and unclear instructions among them. Government forms are particularly prone: placeholder-only fields in a utility account lookup, unexplained asterisks, date formats nobody states, groups of radio buttons whose shared question sits in a heading far away. For an overview, see common barriers.

Code: placeholders, groups, formats, required marks

Placeholder used instead of a label

<input name="acct" placeholder="Utility account number">

<label for="acct">Utility account number</label>
<input id="acct" name="acct" inputmode="numeric" placeholder="e.g. 4471-0092">

Radio group without its question

<p>Type of visit</p>
<input type="radio" name="visit" id="v1"> <label for="v1">New patient</label>
<input type="radio" name="visit" id="v2"> <label for="v2">Return visit</label>

<fieldset>
  <legend>Type of visit</legend>
  <input type="radio" name="visit" id="v1"> <label for="v1">New patient</label>
  <input type="radio" name="visit" id="v2"> <label for="v2">Return visit</label>
</fieldset>

A strict format nobody explained

<label for="tag">Dog license tag</label>
<input id="tag" name="tag" pattern="[A-Z]{2}[0-9]{5}">

<label for="tag">Dog license tag</label>
<p id="tag-hint">Two capital letters then five digits, for example AB12345.</p>
<input id="tag" name="tag" pattern="[A-Z]{2}[0-9]{5}" aria-describedby="tag-hint">

Code: SwiftUI and Jetpack Compose

// SwiftUI
TextField("Parcel number", text: $parcel)   // label disappears once typed

// SwiftUI
VStack(alignment: .leading) {
  Text("Parcel number")
  Text("Printed on your tax bill, e.g. 12-345-678").font(.caption)
  TextField("12-345-678", text: $parcel)
    .accessibilityLabel("Parcel number")
}

// Jetpack Compose
OutlinedTextField(
  value = parcel, onValueChange = { parcel = it },
  placeholder = { Text("Parcel number") }
)

// Jetpack Compose
OutlinedTextField(
  value = parcel, onValueChange = { parcel = it },
  label = { Text("Parcel number") },
  supportingText = { Text("Printed on your tax bill, e.g. 12-345-678") }
)

How to check it

1. Look at each field with the page scrolled normally. Is there visible text that says what to enter?
2. Click in the field and start typing. Does the label stay visible?
3. Check groups of radio buttons and checkboxes for a shared question as well as per-option labels.
4. Look for formats, length limits and required fields that nobody states.
5. Tools: automated rules find fields with no label at all. They cannot tell if the instructions are enough, so ask someone unfamiliar with the form to fill it in.

Mistakes seen on public forms

• Placeholder text as the only label.
• Format hints placed after submission, in the error message.
• Labels hidden with display:none.
• Instructions only in a tooltip that appears on hover.

Ship it when

• Every input has a visible label that stays while typing.
• Unusual formats and constraints are stated before the field.
• Each radio and checkbox option has its own label, and a group label (fieldset and legend) is recommended for the shared question.

Sources

• Understanding SC 3.3.2: Labels or Instructions (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.