Skip to content
SilktideHelp

Icon-only control

Silktide looks for buttons and links that are labelled only by an icon - such as a close cross, a hamburger menu, or a search magnifier - with no text name attached for people who cannot see the icon.

<!-- Problem: nothing announces what this button does -->
<button><svg>…</svg></button>

<!-- Fix: name the control -->
<button aria-label="Open menu"><svg>…</svg></button>

Why this matters

Sighted users work out what an icon button does from its shape and context. users have no equivalent fallback: without an , their software announces an unnamed "button" or "link", or reads out leftover code such as an icon's CSS class name. Every icon-only control without a name is a control those users must activate blind or skip entirely - and these are often the most important controls on the page: menus, search, close, next.

How to fix it

  1. Add an label describing what the control does, not what the icon looks like: aria-label="Search", not aria-label="Magnifying glass".
  2. If the same wording already exists as visible text nearby, point at it with aria-labelledby instead of duplicating it.
  3. If the icon is an <img>, giving it meaningful alt text also names the control.
  4. If the control does nothing useful and exists only for decoration, make it non-interactive instead of naming it.

How Silktide tests this

  1. Find the visible buttons, links, and disclosure controls on each page, including elements with role="button" or role="link".
  2. Skip any control that already has a name: visible text of 2 or more characters, an aria-label, an aria-labelledby, or a title attribute.
  3. Check whether the remaining controls contain an icon: an inline SVG, an image with empty alt text, or text drawn in a recognised icon font.
  4. Report controls that show an icon but have no name.

Troubleshooting

The control is labelled some other way

Silktide honours aria-label, aria-labelledby, title, visible text, and image alt text. If your control is named through a mechanism outside these - which is rare - verify with a screen reader that the name is actually announced, and the finding if it is.

The icon is decorative and sits next to text

Controls with meaningful visible text are not reported, even when an icon sits alongside the text. If a control was reported, its text did not reach 2 meaningful characters - single-glyph text such as "×" does not count as a label.

Learn more

Last updated

Was this page helpful?