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.
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
<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><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?
How do I make an icon link accessible?
What is the ideal length for a link label?
aria-label or visible text: which should I choose?
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