Writing

When an icon needs a label, and when it must not have one

There are only two cases, and one question separates them.

If you deleted the icon, would the meaning survive?

If yes, the icon is decorative. Hide it. If no, the icon carries the meaning, and something must say it out loud.

Case one: the icon sits beside a word

<button>
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
  Delete
</button>

The word Delete is already there. The icon repeats it visually for the sighted reader. A screen reader that also announced the icon would say "delete delete".

So mark it aria-hidden="true". Add focusable="false" as well, because older Internet Explorer put SVGs in the tab order, and the attribute is harmless everywhere else.

This is the majority of icons in a normal interface, and the correct handling is to say nothing.

Case two: the icon is alone

<button aria-label="Delete this draft">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
</button>

Two things are worth noticing.

The name goes on the button, not on the SVG. The button is the thing being operated, so the button is the thing that needs a name. Putting aria-label on the SVG leaves the button itself unnamed in some combinations.

The icon is still aria-hidden. It has nothing to add once the button is named.

Name it for the action, not the drawing

The label describes what happens, not what is drawn.

A reader who cannot see the screen does not care what the picture shows. They care what the control does.

The visually hidden alternative

aria-label has one weakness: it is often not translated by machine translation, and it is invisible to a sighted user who is confused by the icon. A visually hidden span avoids both.

<button>
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
  <span class="visually-hidden">Delete this draft</span>
</button>

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

Do not use display: none or visibility: hidden for this. Both remove the text from the accessibility tree, which is the opposite of the intent.

An icon that is genuinely content

Rare, but real: a status icon in a table cell with no other indication.

<td>
  <svg role="img" aria-label="Failed" viewBox="0 0 24 24">...</svg>
</td>

Here the SVG is the content, so it takes role="img" and its own label. This is the only case where the label belongs on the SVG.

Better still, do not rely on the icon alone. Colour and shape both fail for some readers, so a status column wants a word as well.

The checklist

• Icon beside text: aria-hidden="true", focusable="false", no label.
• Icon-only control: name the control, hide the icon.
• Icon as content: role="img" and a label on the SVG.
• Never label both the control and the icon.
• Label the action, not the drawing.
• A 24px icon in a control needs a 44px touch target around it, whatever the icon size.

Every icon in our set renders without a hard coded label, so the calling code makes this decision where it belongs.

Questions people ask

Does an SVG need a title element?

Only for the content case, and aria-label is more reliable. A <title> also shows as a browser tooltip, which is sometimes wanted and sometimes not.

Is aria-hidden bad for SEO?

No. aria-hidden affects the accessibility tree, not the document. Search engines read the page normally. Decorative icons carry no text to index in any case.

What about an icon in a link?

The same rule. A link with visible text hides the icon; an icon-only link needs an accessible name on the anchor.

Do I need role="img" on every icon?

No. Only on an icon that carries meaning by itself. On a decorative icon it is noise, and combined with aria-hidden it is contradictory.