Creating accessible links: the complete guide
Why accessible links are essential
Links are at the heart of web navigation. For many users, they represent the gateway to new content or a new action. When poorly designed, they can create major obstacles. Here are a few examples, depending on the type of disability or technical context:
- For blind or visually impaired people: screen readers offer a feature that lists only the links on a page. If these are not explicit, the user is faced with a succession of “click here” or “learn more” links, without knowing where they lead.
- For people with reduced mobility: a clickable area that is too small or a link that is too close to another makes it challenging to use a keyboard or alternative pointing devices.
- For people with cognitive impairments: ambiguous or unclear wording can cause confusion and discourage navigation.
- In certain technical contexts: a poorly identified link can cause indexing or referencing problems.
In short, an accessible link is better for the overall performance of the site, its referencing, and, of course, for the inclusion of all your visitors.
Best practices to follow
1. Provide an explicit link title
A link should have a label that clearly describes its destination or action. Avoid vague phrases such as “click here” or “learn more.”
Bad example:
<p>Pour plus d’informations, <a href=”offre.html”>cliquez ici</a>.</p>
<p>For more information, <a href=”offer.html”>click here</a>.</p>
Good example:
<p>Découvrez le détail de <a href=”offre.html”>notre offre de formation en accessibilité</a>.</p>
<p>Find out more about <a href=”offer.html”>our accessibility training program</a>.</p>
This ensures the link is understandable even when read out of context by a screen reader.
However, it is possible to keep generic visual labels. This is often the case, for example, with blog article titles or product descriptions. We often see “read more” or “see more” as the visible link title. It is indeed complicated (and a little tedious) to visually customize all these links. In this case, we add an aria-label that repeats the visible title and adds context. E.g.: aria-label=“read the rest of the article on accessibility.”
2. Avoid unnecessary repetition
If several links lead to the same page, they should ideally have the same title. Conversely, if the destinations are different, the titles must be distinct.
Good example:
<a href=”contact.html”>Contact us</a>
<a href=”help.html”>Get help</a>
<a href=”contact.html”>Nous contacter</a>
<a href=”aide.html”>Obtenir de l’aide</a>
Be careful with titles such as “Learn More” or “Discover.” They are far too generic.
3. Make links visually identifiable
The WCAG and RGAA stipulate that colour alone should not be used to identify a link. A simple colour change is not sufficient for people who are colour blind or have reduced contrast, for example.
If the link is not obvious, i.e., highlighted, then it must be a colour that contrasts sufficiently with the rest of the text and its background. These contrasts must be at least 3:1. In addition, another indicator other than colour must be present when hovering over and focusing on the link (e.g., bold text).
4. Ensure keyboard accessibility
A link must be accessible with the Tab key, and its focus state must be visible. This means that it must have a clear outline or be highlighted when focused with the keyboard.
Example of accessible CSS style:
a:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
5. Use sufficiently large clickable areas
Links must be large enough to be easily activated, including by users with motor difficulties. WCAG 2.5.8 recommends a clickable area of at least 24 x 24 pixels. Although this is an AAA criterion, it should be respected as much as possible.
Therefore, an icon used as a link must have appropriate padding or margins to provide a sufficiently large clickable area.
6. Clearly differentiate between links and buttons
7. Handling images and icons embedded in links
8. Take specific display modes into account
As with colours, links must remain visible and usable in different modes:
- High contrast: check that links remain distinguishable, even when your colours are replaced by those of the system.
- Dark mode: ensure that the colour of the links maintains sufficient contrast with the background.
- Off-context reading: test your links in a screen reader’s list of links.
Your checklist for truly accessible links
- Only use “click here,” “more,” “>>,” or “learn more” as labels.
- Make sure you don’t remove underlining from links without providing an alternative visual indicator.
- Ensure links aren’t too close together or too small, as this can make them difficult to click.
- Use links to trigger actions that buttons should perform.
- Don’t forget to manage keyboard focus status.
Conclusion
An accessible link must be understandable, identifiable, and usable by everyone. This means choosing explicit wording, ensuring sufficient contrast, making the link visible to the keyboard, and respecting the distinction between links and buttons.
These simple rules can have a profound impact on the user experience. For a blind person using a screen reader, switching from a list of “click here” to a list of clear and explicit links makes navigation infinitely smoother. For a visually impaired person, a link with enhanced contrast and a visible focus is a guarantee of comfort.
By following these principles, you make your content accessible, compliant with international standards, and more enjoyable for all users. And last but not least, you ensure your links are SEO-optimized, which is always a good thing!
Book
a discovery call
Assess the extent of your digital accessibility, development, or branding needs
Get concrete ideas for areas of improvement
Benefit from our expert advice, in-depth experience, and strategic vision in the field
Free • 45 minutes • Online