Name every control
Icon buttons need aria-label, fields a <label>, images alt.
Vercel Labsweb-interface-guidelines · command.md
Icon-only buttons need `aria-label`
From web-design-guidelines (Web Interface Guidelines).
Icon-only buttons
Tap, hover or Tab through each row, or press Read.
No aria-labelBad
INV-0042Acme Corp · $1,240.00
…
<button><svg>…</svg></button>aria-label on eachGood
INV-0042Acme Corp · $1,240.00
…
aria-label="Delete invoice"Form controls
Click “Search invoices”, then type a client name.
Text above the inputBad
Search invoices
…
<span>Search invoices</span><input>A real <label>Good
…
<label for="invoice-search">Meaningful or decorative
Pick an alt for each image.
RenderedPage
Q3 summary
Renewals drove most of the growth.
What the reader saysFails
Why it matters, pros and cons
Why it matters
Screen readers announce name and role. No name, and users hear just “button”.
Pros
- Voice control can target it by name.
- Tests get stable role-and-name selectors.
- Alt text survives a failed image load.
Cons
aria-labelgoes stale silently; lint or test it.aria-labelreplaces visible text; keep those words in it.- A placeholder is not a label.