Skip to content

Accessibility

Why my icon buttons have no accessible name

A link or button whose only content is an icon is announced as “link” or “button” with nothing after it. Someone navigating by controls hears a list of unlabelled items and has to activate them to find out what they do.

What 13x checks

This is rule accessibility.named-controls in the public registry: Links and buttons have accessible names. It runs on every audit, against the pages we actually fetched, and its result is derived from the response rather than estimated.

Surface
Accessibility
Score weight
7 of the readiness score
Scope
Reported as skipped when the page renders only with JavaScript
Applies
To every site

Registry version 2026-07-30. Every rule is published, and the audit is deterministic — the same page produces the same finding every time.

The fix

The same text the audit hands you when this check fails on your own site.

links or buttons have no accessible name — almost always icon-only controls.

html code
<!-- Announced as just "button" -->
<button><svg>…</svg></button>

<!-- Named -->
<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Or with visually hidden text, which also survives CSS failing to load -->
<button>
  <svg aria-hidden="true">…</svg>
  <span class="sr-only">Close dialog</span>
</button>

Always mark the decorative SVG aria-hidden="true", or the reader may announce its contents alongside your label.

Name the action, not the icon: "Close dialog", not "X icon".

Does your site have this problem?

13x checks this and 112 others against your live URL in about 30 seconds. No account, and every finding comes with the fix for your framework.

No signup. Results in 30 seconds.

More accessibility checks