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
- Add an label describing what the control
does, not what the icon looks like:
aria-label="Search", notaria-label="Magnifying glass". - If the same wording already exists as visible text nearby, point at it
with
aria-labelledbyinstead of duplicating it. - If the icon is an
<img>, giving it meaningfulalttext also names the control. - If the control does nothing useful and exists only for decoration, make it non-interactive instead of naming it.
How Silktide tests this
- Find the visible buttons, links, and disclosure controls on each page,
including elements with
role="button"orrole="link". - Skip any control that already has a name: visible text of 2 or more
characters, an
aria-label, anaria-labelledby, or atitleattribute. - Check whether the remaining controls contain an icon: an inline SVG, an
image with empty
alttext, or text drawn in a recognised icon font. - 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.