Accessibility: Best practices for links

Without accessible links, users are not able to find or access the web content they are looking for, leading to a poor user experience. Links are a gateway to web content, the primary means of navigating, and the currency for your SEO (Search Engine Optimization) efforts.

This article provides guidance on how to make sure that links are distinguishable and understandable. It also provides information on automated checks that will help you to detect inaccessible links in your web content.

How to create a link that is distinguishable?

Styling link text with a color that is distinct from the text body and background, is usually not enough. Users with color blindness, cognitive disabilities, or those who use the zoom function may struggle to distinguish a link identified by color alone.

Therefore, you often need other visual means for communicating to the user, that there is a clickable link on the website. This applies to all the different states a link can have. For instance, a link needs to be distinguishable when you are hovering over it with a mouse as well as when the link is in focus.

Technically using color only, to distinguish a link, passes WCAG (Web Content Accessibility Guidelines) if the color contrast compared to the surrounding text is at least 3:1 and simultaneously 4.5:1 against the background.

What non-color indicators can I use, to make a link distinguishable?

The most common method for distinguishing a link is to add an underline using a CSS (Cascading Style Sheets) text-decoration-line property. Since the underline is so commonly used to distinguish links, it is also the easiest to understand, for users. Underline is also the default way or distinguishing link for the browser.

Other methods that may satisfy WCAG include making the link text visibly bolder, changing font style, changing cursor style on hover, or even adding a border, box-shadow, or outline. Nevertheless, the more familiar the method used, the easier it is for the user to understand the link element.

Tips:

• Siteimprove checks if links in blocks of text are distinguishable from the surrounding text and approve several ways to distinguish links. 
• Use the Page report accessibility explorer in the Accessibility module or browser extension to view your page through colorblind modes.

What makes a link text understandable?

Even when the links visually stand out, they need to be meaningful and clearly explain where they will take users. This helps the user to navigate efficiently to the right content. When authoring a link text, ask yourself: 

Does the link explain what the user will get when they click on it?
Be clear, concise, and use an active tone of voice in the link text. This makes it easier for a user to understand that there is an action to do. It’s also essential to indicate if the link opens a new window or PDF. For screen reader users, users with a cognitive or learning disability, or simply distracted users, an unexpected new window can disrupt navigation. Screen readers announce ‘link’ when encountering a link, and thus link text should not start with ‘link to...’

Is it understandable what the link does regardless of the surrounding context?

Assistive technology users, who navigate using link texts or users who are using magnification on the website, might not experience the surrounding context. Therefore, link text should also be understandable when standing alone.

Compare the following link text examples: 

• “List of events” 
• “View the list of events for Summer 2022 (PDF)”

Here you can see that the second example is better as it is more descriptive.

Tips:

• You can find a list of all your link texts in the Quality Assurance Inventory (Quality Assurance > Inventory > Link text). Review the list to find inaccessible link texts. (Note: This list contains only the link text. If another method, like an aria-label is used to create an accessible name for the link, you would not be able to see it from this list.)
• Use Siteimprove Policy to create a customized check to monitor inadequate link texts.
• Watch an online seminar on how a screen reader user navigates on a website.

How does Siteimprove help you to detect inaccessible links?

Siteimprove has the following automated checks to help you improve the accessibility of your links:

• Links in blocks of text are distinguishable 
• Links with identical accessible names and context serve equivalent purpose
• Links have an accessible name

Broken links are inaccessible to 100% of your users. It’s important to keep the number as low as possible with the help of Quality Assurance.