- Success Criterion 3.3.2
- Conformance level A
Icon-Only Search Field With No Accessible Label
3.3.2 — Labels or Instructions
Scenario
Setting
A music streaming app's playlist screen
What’s wrong
Inputs with no visible label at all (icon-only search with no accessible instruction where user input format matters).
Example
Here's a real case from a music streaming app's playlist screen: inputs with no visible label at all (icon-only search with no accessible instruction where user input format matters).
Why it matters
Everyone filling forms, especially people with cognitive disabilities and magnifier users. In this case (a music streaming app's playlist screen), they have to guess at the correct format.
How to test
Look at each field before interacting with it: if there's no visible label at all (e.g., icon-only search with no text), it fails.
How to fix
A persistent visible label must be provided, required status must be marked visually AND programmatically (with any symbol explained), and format rules stated before input.
Outcome
Once corrected, a music streaming app's playlist screen lets them complete the form without guessing.
Who is affected
Everyone filling forms, especially people with cognitive disabilities and magnifier users.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Multi-Part Field Like a Phone Number With No Text Label
- Placeholder Text Used as the Only Label, Vanishing on Input
- Required Input Format Never Stated Until After an Error
- No Indication of Which Fields on a Form Are Required
- Radio Button Group Missing Its Question or Prompt Text
- Field Instructions Placed After the Field They’re Meant to Explain