Link and Button Names

Every interactive element - links, buttons, form controls - needs an accessible name. That is the text a screen reader announces when a user focuses on the element. Without a clear, descriptive name, the user does not know what the element does or where it goes.

The accessible name is computed from several possible sources, in priority order:

1. aria-labelledby - points to another element whose text becomes the name
2. aria-label - a directly set string
3. Text content - the visible text inside the element
4. title attribute - used as a fallback
5. alt text - for image-based links and buttons

If none of these produce a name, the element has no accessible name.

Generic link text

"Click here", "Read more", "Learn more", "View", "Here" - these are meaningless when listed without surrounding context. A screen reader user navigating by links hears a list of "read more, read more, read more" with no way to distinguish them.

<!-- Wrong -->
<a href="/events/summer-reading">Read more</a>

<!-- Right -->
<a href="/events/summer-reading">Learn about the Summer Reading Program</a>

Duplicate links to different destinations

Two links with the same visible text pointing to different URLs. The name exists, but it does not distinguish the purpose.

<!-- Wrong: both say "View details" but go to different pages -->
<a href="/event/123">View details</a>
<a href="/event/456">View details</a>

<!-- Right: name distinguishes the destination -->
<a href="/event/123">View details: Summer Reading Kickoff</a>
<a href="/event/456">View details: Author Talk with Jane Smith</a>

When the visual design requires short link text, add visually hidden context:

<a href="/event/123">
  View details
  <span class="sr-only"> - Summer Reading Kickoff</span>
</a>

Icon-only buttons

A button containing only an SVG icon or image, with no text and no aria-label, has no accessible name.

<!-- Wrong -->
<button><svg><!-- search icon --></svg></button>

<!-- Right -->
<button aria-label="Search">
  <svg aria-hidden="true" focusable="false"><!-- search icon --></svg>
</button>

Links that rely on visual position

Links describing their location - "see above", "click the button below", "follow the link on the right" - only work in a specific visual layout. On a small screen or with a screen reader, positional language is meaningless.

<!-- Wrong -->
<p>Fill out the form above to register.</p>

<!-- Right -->
<p><a href="/register">Register for the event</a> using our online form.</p>

Raw URLs as link text

A URL pasted as the visible text of a link is announced character by character by some screen readers. Raw phone numbers and email addresses as link text are hard to distinguish when multiple appear on the same page.

<!-- Wrong -->
<a href="https://example.com/events">https://example.com/events</a>

<!-- Right -->
<a href="https://example.com/events">Upcoming events</a>

How to fix

For most cases the fix is better visible text - descriptive, destination-specific, layout-independent. This benefits all users.

When visible text cannot be changed, use aria-label sparingly to provide an accessible name that differs from visible text. Be aware that voice control users activate links by speaking the visible text - a mismatch between visible text and aria-label causes confusion.

WCAG criteria