Empty Links and Buttons: When 'Click Here' Isn't Even There

An icon-only close button, a social media link built from a background-image with no text, a "read more" link that's really just an arrow glyph — all extremely common patterns, and all completely silent to a screen reader if there's no accessible name attached. Where a sighted user sees an X icon and understands "close this," a screen reader user hears only "button" with no indication of what it does.

Industry data puts this at roughly 48% of ADA web accessibility complaints (combining empty links and empty buttons, which share the same root cause and the same fix pattern).

How this happens

Icon-only buttons with no label:

<!-- Announces as just "button" -->
<button><svg>...</svg></button>

Links wrapping only an image with no alt text:

<!-- Announces as just "link" -->
<a href="/cart"><img src="cart-icon.svg"></a>

"Read more" links with no context, which technically have text but fail a related, subtler check (WCAG 2.4.4, Link Purpose in Context) — a screen reader user often browses a page by pulling up a list of every link on it in isolation, and a page with ten "read more" links all announcing identically gives no way to tell them apart.

How to fix it

Give the control an accessible name via visible text, aria-label, or (for an image inside a link) real alt text on the image:

<!-- Icon button: aria-label supplies the name -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Image link: alt text on the image is the link's name -->
<a href="/cart">
  <img src="cart-icon.svg" alt="View cart">
</a>

Note the aria-hidden="true" on the decorative SVG inside the button — the icon itself carries no independent meaning once the button has its own accessible name, so hiding it from assistive technology avoids any duplicate or conflicting announcement.

For the "read more" pattern, either make the link text itself specific (Read more about our Q3 earnings instead of bare Read more), or add a visually-hidden span that only assistive technology reads:

<a href="/blog/q3-earnings">
  Read more<span class="sr-only"> about our Q3 earnings</span>
</a>

The underlying principle

Every interactive control needs SOME accessible name — this is WCAG 4.1.2 (Name, Role, Value), a Level A criterion that underlies a huge share of all detectable violations across the whole spec. If you remember one rule from this page: never ship an icon-only interactive element without asking "what would a screen reader actually say when it lands on this?"

Official references

• Deque University: button-name
• Deque University: link-name
• W3C Technique H2