Accessibility

Why an Icon-Only Button Needs an aria-label to Be Usable

A button that makes perfect visual sense can be a complete mystery when it's only ever announced as 'button'.

What it is

Many buttons on modern websites use only an icon with no visible text β€” a magnifying glass for search, a hamburger icon for a menu, an X to close a popup. A sighted visitor recognizes these icons instantly from familiarity and context, but a screen reader has nothing to read aloud unless the button also has accessible text attached behind the scenes, typically via an aria-label attribute (for example, aria-label="Search") that isn't shown visually but is announced to a screen reader.

Without that, a screen reader simply announces the generic word "button" with no further information, giving no indication of what pressing it would actually do.

Why it matters

An icon that's visually obvious to a sighted person carries zero information on its own to someone who can't see it β€” the icon itself isn't inherently meaningful without sight, only the concept it represents is, and that concept has to be communicated some other way for a screen reader user. A page full of icon-only buttons, each announced only as "button, button, button", leaves a screen reader user with no way to tell what any of them do without guessing and pressing them to find out.

This is a widespread and easy-to-miss issue precisely because icon-only buttons are a common, visually clean design pattern β€” the accessibility gap only becomes obvious when actually testing with a screen reader rather than just looking at the page.

How to fix it

  1. Identify every button on your site that uses only an icon with no visible text label.
  2. Add an aria-label attribute describing the button's action in a few words, e.g. aria-label="Close menu" or aria-label="Search".
  3. Where possible, consider adding a short visible text label alongside the icon instead β€” this helps sighted visitors too and reduces reliance on remembering icon meanings.
  4. If you're using a website builder, check whether icon buttons generated by the platform already include accessible labels by default β€” some do, some require you to fill in an "accessible name" or "screen reader text" field manually.
  5. Test with a free screen reader (NVDA, VoiceOver) by tabbing to each icon button and confirming it announces a clear, specific action rather than just "button".

Check whether your own site has this problem

Launch Readiness scans your site for this and ~50 other pre-launch issues in seconds β€” free, no signup.

Run a free check