Links without accessible label

The issue

An accessible link must have a label that clearly describes its destination or function. WCAG success criterion 2.4.4 requires that every link be explicit, meaning its label allows the user to understand its destination without needing the surrounding visual context. This issue manifests in several ways on the web. Image-links without alt are the most frequent: a social media icon, a partner logo, or an action button in image form, all wrapped in an <a> tag but without any accessible text. The screen reader then announces 'link' followed by the image filename or, worse, nothing at all. Links reading 'Click here' or 'Learn more' repeated several times on the same page are also problematic. Screen reader users can display the list of all links on the page to navigate quickly. If this list contains ten 'Learn more' links, it is totally useless — the user cannot know what each link refers to. Empty links (an <a> tag with no text content and no aria-label) are an extreme case: the screen reader detects a link but cannot announce anything. The user knows there is a link but does not know what it does. Links composed solely of a Font Awesome icon or an SVG without an alternative are also very common. The developer sees a phone or envelope icon, but the screen reader sees only an empty element. Each of these cases has a simple solution: add visible text, an alt attribute on the image, an aria-label on the link, or an sr-only span to provide the necessary context.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

Screen reader users often navigate by browsing the page's link list (shortcut 'L' in JAWS or NVDA). Each link is announced with its label. If a link has no label, it is announced as just 'link', which is useless. The user must then return to the page, find the link in context, read the surrounding text to guess its destination — a slow and frustrating process. People using voice control (Dragon NaturallySpeaking, Voice Control) are also affected. To activate a link by voice, they say 'Click on' followed by the link label. If the link has no label, voice control cannot target it. Links without labels also hurt SEO: Google uses link text to understand the content of the target page. A 'Click here' link provides no SEO value.

Code example

Before (non-compliant)
<a href="/contact">
  <img src="/icons/email.svg">
</a>
<a href="/premium-plan">Learn more</a>
<a href="/standard-plan">Learn more</a>
<a href="tel:+33123456789">
  <i class="fa fa-phone"></i>
</a>
<a href="/cart"></a>
After (compliant)
<a href="/contact">
  <img src="/icons/email.svg" alt="Contact us by email">
</a>
<a href="/premium-plan">Discover the Premium plan</a>
<a href="/standard-plan">Discover the Standard plan</a>
<a href="tel:+33123456789" aria-label="Call us at 01 23 45 67 89">
  <i class="fa fa-phone" aria-hidden="true"></i>
</a>
<a href="/cart" aria-label="View cart (3 items)">
  <svg aria-hidden="true">...</svg>
</a>

Frequently Asked Questions

Are 'Learn more' links forbidden?
They are not forbidden but they must be made explicit. You can add visually hidden context: 'Learn more<span class="sr-only"> about the Premium plan</span>'. The best approach is to replace the label with a visible descriptive text: 'Discover the Premium plan'.
How do I make an icon link accessible?
If the link contains only an icon (SVG, Font Awesome, image), add an aria-label on the link describing its destination or function. Mark the icon with aria-hidden="true" so the screen reader does not try to read it. Example: <a href="/twitter" aria-label="Follow us on Twitter"><svg aria-hidden="true">...</svg></a>.
What is the ideal length for a link label?
A link label should be concise but descriptive. Aim for 3 to 8 words that describe the destination or action. Avoid labels that are too long (an entire sentence) or too short ('here', 'link', 'page'). The label should make sense out of context because screen reader users often browse links in isolation.
aria-label or visible text: which should I choose?
Always prefer visible text when possible. Visible text benefits all users, not just screen reader users. Use aria-label only when the design does not allow adding visible text (icons, images). Note: aria-label replaces the text content for screen readers, it does not complement it.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit