Making icon-only buttons accessible
A button with just an icon — a trash can, a gear, a heart — is compact but risky. Without a text label, screen-reader users hear nothing useful and sighted users may guess wrong. Fix it in three steps.
1. Give it an accessible name
Add aria-label so assistive tech announces the action, and mark the icon itself decorative:
<button aria-label="Delete item">
<svg aria-hidden="true">…</svg>
</button>2. Add a visible tooltip
A hover/focus tooltip helps everyone learn what the icon does. Make sure it appears on keyboard focus too, not just mouse hover.
3. Size the tap target
Aim for at least a 44×44 px hit area even if the icon is 24 px — pad the button so mobile users can tap it reliably.
Better still: where space allows, pair the icon with a short text label. Icon-plus-label is the most usable pattern of all.
Frequently asked questions
Do icon buttons need a label?
Yes. If there's no visible text, add aria-label (or visually-hidden text) so the button has an accessible name.
How big should a tap target be?
Around 44×44 px minimum, per common mobile accessibility guidance.