Anti-pattern · Accessibility · High
Icon-Only Button Without a Label
An icon-only button without a label is a control whose only content is a glyph, leaving screen readers and often sighted users with no idea what it does.
The tell
A button whose only child is an icon or SVG, with no aria-label or visually hidden text.
Why it happens
Icon buttons are compact and look clean in a toolbar, so models favour them. Accessible names are invisible in a screenshot, so nothing pushes the model to add one.
The rule
Every icon-only control gets an aria-label plus a visible tooltip on hover and focus.
- Add aria-label to every button whose content is only an icon.
- Show a tooltip on both hover and keyboard focus, not hover alone.
- Word the label as the outcome ("Delete item"), not the glyph ("Trash icon").
What is a Icon-Only Button Without a Label?
An icon button with no accessible name announces as "button" and nothing else. It is also a usability problem for everyone: a magnifier means search today and filter tomorrow. Give every icon-only control an aria-label, pair it with a tooltip on hover and focus, and check that the label says what happens rather than what the glyph looks like.
Paste this after your existing prompt to strip the pattern from the result.