• June 1, 2025

Accessible Link Naming for Compliance and Usability

Rule ID: link-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To ensure links are accessible to all users—including those who use screen readers or rely on keyboards for navigation—implement the following best practices:

• Provide Accessible Link Text: All links must have meaningful, visible text or an accessible name via aria-label, aria-labelledby, or image alt text (if an image is used as a link).

  Example:

  html

  KopierenBearbeiten

  <a href="news.html" aria-label="Read more about today's news">[Read more...]</a>


• Avoid Hidden or Inaccessible Link Text:

  • Do not use display: none or aria-hidden="true" on link text.

  • Ensure all content intended to convey purpose is programmatically accessible.

• Ensure Programmatic Focus:

  • All links must be able to receive keyboard focus. Avoid relying solely on mouse-based events such as onmouseover, onmouseout, or hover.

  • Use device-independent events like onfocus, onblur, and proper tabindex="0" for non-link elements that need to behave like links.

• Use Native Anchor Elements:

  • Always use real anchor (<a>) elements with a valid href attribute for navigation purposes. Avoid styling div or span to mimic links unless absolutely necessary and ensure they are accessible.

• Avoid Duplicate Link Names:

  • Links with the same text should only be used if they lead to the same destination. If the destinations are different, the link texts must be distinct and descriptive.

• Do Not Suppress Focus Styles:

  • Ensure visual focus indicators (like outlines) are preserved for keyboard users to know where they are on the page.

Why it Matters

Links are a primary way users navigate web content. If a link is not accessible—whether it’s not focusable, not labeled correctly, or hidden—it creates barriers for:

• Screen reader users, who rely on link names to understand what action the link will perform.

• Keyboard-only users, who cannot use mouse-based events and depend on programmatic focus to navigate.

• Sighted users, who use focus indicators to understand their current location on the page when navigating with a keyboard.

A missing or unclear link name can lead to confusion, misnavigation, or total inaccessibility for these user groups, effectively cutting them off from vital site content.

Rule Description

All link elements (and images used as links) must have:

• A programmatically accessible name (either visible text or through ARIA labeling),

• Unique labels if pointing to different URLs,

• And the ability to receive focus via keyboard navigation.

The Algorithm (in simple terms)

The accessibility checker verifies that:

1. Every anchor (<a>) element has an accessible name.

2. The link can receive focus via keyboard (i.e., it’s not hidden or disabled).

3. If multiple links have the same visible text, they must point to the same resource—otherwise, differentiate them.