Links need discernible text and focus

Links must have discernible text and be focusable without hiding the name

Intro:

Every link needs a clear, programmatic name that users and assistive tech can perceive, and it must receive keyboard focus. This applies to text links, icon-only links, and images used as links. Keyboard and screen reader users rely on this name to understand purpose and to navigate reliably.

Why It Matters

Screen reader users navigate by links. If the accessible name is missing or hidden, they cannot tell where the link goes.

Keyboard users need a link to be focusable and to show a visible focus indicator. Without focus or a clear indicator, navigation breaks.

Icon-only links and linked images without a meaningful name are announced as “link” with no purpose, increasing confusion for users with vision or cognitive disabilities.

Common Causes

• Icon-only links without an accessible name (e.g., SVG or font icon with no text or aria-label)
• Images used as links with empty or missing alt text
• Links whose visible text is hidden from assistive tech (aria-hidden=true or display: none)
• Non-semantic elements (span/div) with click handlers used as links, or <a> without href
• Mouse-only event handlers (mouseover/mouseout/hover) that prevent keyboard activation
• Focus styles removed (outline: none) or insufficiently visible
• Multiple different destinations sharing identical link text (e.g., several “Read more”) with no differentiator

How to Fix

1. Use semantic links:
   • Use <a href="..."> for navigation. Do not replace links with span/div + onclick. Buttons are for actions; links are for navigation.
2. Provide a programmatic name:
   • Ensure the accessible name is perceivable by assistive tech.
   • For text links: keep the text visible and not aria-hidden.
   • For icon-only links: add accessible text with aria-label or visually hidden text.
   • For linked images: supply meaningful alt text that describes the destination or action.
3. Do not hide the name:
   • Do not use aria-hidden=true or display: none on the link text.
   • If you must visually hide extra text, use a “visually-hidden” utility class that keeps content available to screen readers.
4. Ensure keyboard focus and activation:
   • All links must be reachable with Tab and activatable with Enter.
   • Preserve or provide a visible focus indicator. Recommendation: a focus outline or indicator with at least 3:1 contrast against adjacent colors (WCAG 2.2 guidance).
5. Avoid device-specific events:
   • Replace mouseover/mouseout/hover-only behaviors with device-independent interactions (click plus :focus and :hover styles). If scripting is needed, use focus/blur in addition to pointer events.
6. Differentiate identical links:
   • When multiple links use the same visible text but go to different targets, add hidden context (e.g., article title) so the accessible names are unique while keeping the visible label intact.

How to Test

Keyboard check:

• Press Tab through the page. Each link receives focus in a logical order.
• The focus indicator is always visible and easy to spot.
• Press Enter on links to confirm activation without a mouse.

Screen reader check:

• With a screen reader, navigate the links list and in-page reading order.
• Each link is announced with a meaningful name. Icon-only and image links have proper names/alt.
• Identical visible labels that go to different places are distinguishable by their accessible names.

Mobile/touch check:

• Linked images and icons have clear labels for screen reader rotor/links list.
• Touch targets are large enough to activate confidently (recommendation: at least 44×44 CSS px where feasible).

Good Example

<ul class="news">
  <li>
    <h3>City budget vote delayed</h3>
    <p>The council postponed the final budget decision until next week.</p>
    <a href="/news/budget-delay">
      Read more <span class="visually-hidden">about City budget vote delayed</span>
    </a>
  </li>
  <li>
    <h3>Library adds weekend hours</h3>
    <p>New Saturday and Sunday hours start next month.</p>
    <a href="/news/library-hours">
      Read more <span class="visually-hidden">about Library adds weekend hours</span>
    </a>
  </li>
</ul>

<a class="profile-link" href="/account" aria-label="View your account profile">
  <svg aria-hidden="true" focusable="false" class="icon-profile"><!-- icon --></svg>
</a>

<a href="/shop/mugs">
  <img src="/img/mug.jpg" alt="Shop coffee mugs" width="200" height="150">
</a>

<style>
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.news a:focus, .profile-link:focus {
  outline: 3px solid #005fcc; outline-offset: 2px; /* high-contrast focus */
}
</style>

Bad Example

<ul>
  <li>
    <h3>City budget vote delayed</h3>
    <a onclick="go('newsbudget-delay')">Read more</a> <!-- not a real link -->
  </li>
  <li>
    <h3>Library adds weekend hours</h3>
    <a href="/news/library-hours"><span aria-hidden="true">Read more</span></a> <!-- hidden name -->
  </li>
</ul>

<a href="/account">
  <svg class="icon-profile"></svg> <!-- no text, no aria-label -->
</a>

<a href="/shop/mugs"><img src="/img/mug.jpg" alt="" /></a> <!-- empty alt on linked image -->

<style>
a:focus { outline: none; } /* removes focus indicator */
span.fake-link { cursor: pointer; }
</style>

Quick Checklist

• Use <a href> for navigation; do not rely on span/div + onclick
• Every link has a perceivable accessible name (text, aria-label, or alt)
• Linked images have meaningful alt; icon-only links have labels
• Do not hide link text with aria-hidden or display: none
• All links are reachable and activatable by keyboard
• Focus styles are clearly visible and high contrast
• Avoid mouse-only events; support focus and click
• Differentiate identical visible link labels with hidden context