How to Give Icon Buttons Accessible Names
Icon-only buttons like the hamburger menu, close X, and search magnifier announce as just 'button' to screen readers. Here is how to name them properly.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
Plenty of buttons on a modern site are just an icon: the hamburger menu, the close X, the search magnifier, carousel arrows, social icons. To a sighted visitor the meaning is obvious. To a screen reader, an icon button with no text announces as nothing more than "button," and the user has no idea what it does. The same goes for icons built as SVG graphics.
The two cases
Every icon falls into one of two buckets. Interactive icons (inside a button or link) need a name describing the action. Decorative icons (sitting next to text that already explains the action) should be hidden from screen readers so they are not announced twice.
Step by step
- Find icon-only controls. Look for any button or link whose only content is an icon, with no visible text.
- Name the action, not the icon. Add an aria-label to the button or link describing what it does: "Open menu," "Close dialog," "Search," not "hamburger" or "magnifying glass."
- Hide the icon itself. Add aria-hidden="true" to the icon or SVG inside the button so it is not read separately.
- Expose toggle state. For controls that open and close something, add aria-expanded set to true or false so users know the current state.
- Leave decorative icons mute. An icon next to a text label only needs aria-hidden="true"; the text carries the meaning.
- Test with the keyboard. Tab to each control and confirm it announces a clear, action-based name.
One common mistake
The accessible name must sit on the clickable element (the button or link), not on the icon inside it. Putting an aria-label on the SVG while leaving the button blank is the usual reason an audit still fails after a "fix."
Frequently asked
What business owners ask next.
Where exactly does the aria-label go?
On the interactive element itself, the button or link, not on the icon or SVG inside it. The icon should instead get aria-hidden="true" so it is skipped.
What about icons that sit next to text?
Those are decorative. The visible text already names the action, so the icon just needs aria-hidden="true" to avoid being announced twice.
How do I handle a menu button that opens and closes?
Give it a clear aria-label like 'Open menu' and add aria-expanded, toggling it between true and false as the menu opens and closes. That tells screen-reader users the current state.