skip to content →
infoSEO RULE · R34

Buttons and links without accessible names

A button or link that contains only an icon (no visible text and no aria-label) is unannounced to screen reader users. Every interactive element needs an accessible name — visible text, aria-label, or aria-labelledby.

A button or link that contains only an icon (no visible text and no aria-label) is unannounced to screen reader users. Every interactive element needs an accessible name — visible text, aria-label, or aria-labelledby. The accessible name is what a screen reader reads when focus reaches the element. For a button with visible text, that's the text. For an icon-only button, it must come from aria-label, aria-labelledby, or the title attribute on an icon image.

Last updated·part of the 50-rule library

What it is

The accessible name is what a screen reader reads when focus reaches the element. For a button with visible text, that's the text. For an icon-only button, it must come from aria-label, aria-labelledby, or the title attribute on an icon image.

Why it matters

Without a name, screen reader users hear "button" or "link" with no context — they can't use your nav, your modal close, your form submit. WCAG 4.1.2 failure. Search engines also use link names to understand site structure.

How to fix it

  1. Add aria-label to icon-only controls. <button aria-label="Close dialog"><svg>✕</svg></button>. Choose the verb the user is performing.
  2. Add alt to icon images inside links. <a href="/cart"><img src="/cart.svg" alt="Cart"></a>. Empty alt would mean an empty link name.
  3. Audit with axe DevTools. The "button-name" and "link-name" rules catch every unnamed control.

Authoritative sources

Related SEO rules