Icon-only buttons (add an accessible name)

A short, practical UI accessibility note for games and web UIs. No tracking.

Try the micro-demo: icon-only-button-demo.html

It compares icon-only toolbar buttons with no accessible name (BEFORE) vs labeled with aria-label (AFTER).

What goes wrong

If a button only shows an icon (gear, magnifying glass, X), many people can still use it visually. But for screen reader users, the button needs a name so the intent can be announced.

Without a name, the control may be announced as just “button”.
In a toolbar with multiple icon-only buttons, that’s confusing and slow.
Tooltips on hover don’t help if you can’t hover (keyboard/touch) or can’t see the tooltip.

What to do instead

Add an accessible name using aria-label for icon-only buttons.
Or include visually hidden text (e.g., sr-only) inside the button.
Keep the icon aria-hidden so it doesn’t get read as stray text.

Minimal sketch (aria-label):

<button type="button" aria-label="Settings">
  <svg aria-hidden="true" ...>...</svg>
</button>

Alternative (hidden text):

<button type="button">
  <span class="sr-only">Settings</span>
  <svg aria-hidden="true" ...>...</svg>
</button>

Either pattern gives assistive tech something meaningful to announce.