• 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 

<input type="search" placeholder="">
<button aria-label="Search"><svg class="icon-magnifier"></svg></button>
<!-- users can type artist:name or track:name but nothing states this, and the input itself has no name -->

Why it matters

A user who wants to filter by artist has no way to discover the artist: syntax, and a screen reader announces only an unlabeled search box.

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 visually hidden label still needs to exist in code, and any special input syntax needs to be stated somewhere, not left to icon guesswork.

<label for="playlist-search">Search this playlist by song, or type artist: followed by a name</label>
<input type="search" id="playlist-search">
<button aria-label="Search"><svg class="icon-magnifier" aria-hidden="true"></svg></button>

Outcome

The listener discovers the artist: filter and narrows the playlist to one performer right away.

Who is affected

Screen reader users who hear no purpose for the field, and sighted users who never learn the special search syntax exists.

Learn more

Related scenarios