Features
Start a free trial

Ensure links have discernible text

Rule ID: link-name User Impact: serious Guidelines: WCAG 2.0

Ensure that all links contain clear and descriptive text to convey their purpose to users, especially those relying on assistive technologies.

About This Rule

This rule ensures that links have discernible text, enhancing accessibility for users who rely on screen readers. Adhering to this guideline aligns with the following standards:

  • WCAG 2.1 (A): 2.4.4 Link Purpose (In Context)
  • WCAG 2.0 (A): 2.4.4 Link Purpose (In Context)
  • WCAG 2.2 (A): 2.4.4 Link Purpose (In Context)
  • Section 508: 1194.22 (a)
  • Trusted Tester: 6.A
  • EN 301 549: 9.2.4.4 Link Purpose (In Context)

Why It Matters

Screen readers and other assistive technologies depend on link text to inform users about the destination or function of a link. Links without discernible text can cause confusion, making it difficult for users to navigate and interact with web content effectively.

How to Fix

To make links accessible:

  • Provide Descriptive Text: Ensure each link includes text that clearly describes its purpose or destination. Avoid using generic phrases like "click here" or "read more."
    Copy code
    <a href="report.pdf">Download the annual report</a>
  • Use Accessible Name Attributes: If a link is represented by an image or icon, provide an accessible name using the aria-label attribute:
    Copy code
    <a href="settings.html" aria-label="Account settings">
  <img src="settings-icon.png" alt="">
</a>
  • Avoid Empty Links: Do not create links without any text or accessible name. Empty links are inaccessible to screen reader users.
  • Ensure Visibility: Make sure that link text is not hidden from assistive technologies using CSS properties like display: none or aria-hidden="true".
  • Ensure Focusability: Avoid using device-specific events (e.g., onmouseover) that may prevent links from receiving programmatic focus. Use device-independent events like onfocus instead.

Examples

Incorrect

A link with generic text:

Copy code
<a href="article.html">Click here</a>

Correct

A link with descriptive text:

Copy code
<a href="article.html">Read the full article on climate change</a>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: