Stephan Zavodny

Accessible links as a key to great UX

5 min read

In my previous post, I shared five essential tips to improve web accessibility, covering heading structures, color contrast, and more. Today, we’re diving into a topic that might seem simple but plays a critical role in web accessibility: links.

Links are one of the most fundamental elements of the web, but they can often be misused in ways that hinder accessibility. In this post, I’ll outline a few best practices to ensure your links are easy to understand, navigate, and use, especially for people with disabilities.

1. Use descriptive link text

When creating links, avoid generic phrases like click here or read more. Instead, use text that describes the link's destination or purpose. This not only improves accessibility but also benefits your SEO by adding context to search engines.

Bad practice example

<a href="/pricing">Click here</a>

Good practice example

<a href="/pricing">See our pricing plans</a>

Why this matters

  • Screen readers often allow users to navigate a page by links alone. Imagine listening to a list of click here links without knowing where each link will take you.
  • Descriptive link text helps all users, including those with cognitive disabilities or low vision, better understand the content.
  • Descriptive links provide search engines with more useful context, improving your site’s search ranking.

2. Avoid nesting links inside labels or other interactive elements

One of the most common accessibility mistakes is nesting interactive elements within other interactive elements. A frequent example of this is placing a link inside a label or button. The W3C specification discourages this practice because it creates confusion for both users and assistive technologies.

Bad practice example

<input type="checkbox" id="terms" />
<label for="terms">
  I agree to the <a href="/terms">website terms and conditions</a>.
</label>

Good practice example

<input type="checkbox" id="terms" />
<label for="terms">I agree to the website terms and conditions.</label>
<a href="/terms">Please read our terms and conditions.</a>

Why this matters

  • Nesting interactive elements can confuse screen readers. They may not properly announce which element is focused or how the user should interact with it.
  • Keyboard users may experience difficulty navigating between the elements, which could cause frustration or even prevent them from interacting with certain parts of your site.

3. Don’t force links to open in a new tab or window

Opening links in a new tab or window without user consent is a bad practice. It can disorient users, especially those with cognitive disabilities or users who rely on screen readers. They may not be aware that a new tab has been opened, leading to confusion.

Nielsen Norman Group, a leader in UX research, emphasizes that opening new tabs disrupts users' workflow and violates the principle of user control. Similarly, Chris Coyier from CSS-Tricks and Adrian Roselli, a respected accessibility expert, strongly advise against this practice for accessibility reasons.

If you absolutely must open a link in a new tab – for example, in the case of external links –, inform the user beforehand by including a visual indicator or text.

Bad practice example

<a href="/external-link" target="_blank">Go to external site</a>

Good practice example (with indicator)

<a href="/external-link" target="_blank">
  Go to external site (opens in a new tab)
</a>

Why this matters

  • Users should have control over their browsing experience. Forcing a new tab disrupts their flow and can make navigation harder for people who rely on assistive technologies.
  • Opening new tabs or windows can affect the browser’s back button functionality, further disorienting users.

4. Ensure links are clearly distinguishable

Links should stand out from the surrounding text to make them easy to identify. Relying solely on color to differentiate links from text is not enough – especially for users with color blindness or visual impairments.

To ensure that links are accessible, always:

  • Underline links by default or ensure they have a visual cue like bold or a distinctive hover effect.
  • Make sure that there’s enough contrast between the link text and the background.

Good practice example

a {
  color: #07c;
  text-decoration: underline;
}

a:hover {
  font-weight: 700;
  text-decoration: none;
}

Why this matters

  • Users with visual impairments may struggle to distinguish links from regular text without visual cues.
  • Relying solely on color violates WCAG guidelines, which call for multiple ways of differentiating content beyond color alone.

5. Links should be accessible via keyboard

For users who cannot use a mouse, navigating via keyboard is essential. Make sure your links are accessible by ensuring:

  • They are focusable with the TAB key.
  • The :focus state is clearly visible when a user navigates to a link using the keyboard.

Never disable focus outlines with outline: 0. Instead, you can customize the focus style to match your design without losing accessibility.

Good practice example:

a:focus {
  outline: 3px solid #fc0;
}

Conclusion

Links are more than just simple navigation tools. By ensuring they’re descriptive, usable, and accessible, you create a better experience for all users – particularly those who rely on assistive technologies. As a bonus, these practices can boost your SEO, helping your site reach a broader audience.

Remember, accessibility isn’t just about complying with standards; it’s about providing a smooth, inclusive user experience. By paying attention to the details, like links, you’re making the web a better place for everyone.