Accessible icon buttons

Icon buttons are everywhere in modern UIs. Let's look at a few simple ways to make them more accessible.

1. If the icon is purely decorative

First, let’s look at a common case when you have a button with both an icon and a label.

<button>
  <svg aria-hidden="true" /*...*/ />
  Edit
</button>

In this case, the icon is just there for decoration — the text “Edit” already tells you what the button does. So we use aria-hidden="true" to hide the icon from assistive tech. That way, screen readers won’t announce “edit icon edit,” which can get confusing.

2. If there’s no visible label (icon only)

Now here’s another pattern — just an icon, like a trash can button with no text.

<button aria-label="Delete">
  <svg /*...*/ />
</button>

This works fine if you add an aria-label. It gives the button an accessible name that screen readers can announce.

There's one caveat: it won’t get picked up by browser translation tools, since it’s not real text in the DOM.

Use visually hidden text

Want both accessibility and translation support? We can do that.

<button>
  <svg aria-hidden="true" /*...*/ />
  <span class="visually-hidden">Delete</span>
</button>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

Here, we’re hiding the label from sight, but keeping it in the DOM — which means screen readers and translation tools can pick it up. This approach is super common in design systems. You can even wrap it into a <VisuallyHidden> component if you're using React.