- Success Criterion 4.1.2
- Conformance level A
- W3C reference F68
Form Field With No Programmatic Label at All
4.1.2 — Name, Role, Value
Scenario
Setting
An e-book reader's library page
What’s wrong
A form field has no programmatic label — screen readers announce 'edit text' with no idea what to type.
Example
<span>Search your library</span>
<input type="text" id="librarySearch" placeholder="Title or author">
<!-- the span is not a label, and it isn't linked to the input with "for" --> Why it matters
A screen reader user tabbing to the search box hears only "edit text" and has no idea it searches their library.
How to test
Tab to a form field and check its accessible name in DevTools: if none is programmatically determined, it fails.
How to fix
Match the label's "for" attribute to the input's id, or wrap the input inside the label element.
<label for="librarySearch">Search your library</label>
<input type="text" id="librarySearch" placeholder="Title or author"> Outcome
A reader hears "Search your library, edit text" and types an author's name right away.
Who is affected
Screen reader users and voice-control users searching their book collection cannot identify the field's purpose.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Assistive Technology Never Told Which Element Currently Has Focus
- Multi-Part Field Where Each Box Has No Individual Name