Accessible Links: Web Accessibility Tutorial, Episode 2

This post is a summary of our video: Accessible Links: Web Accessibility Tutorial, Episode 2, presented by James Jacobs, Head of Accessibility at Jadu. 

Welcome to the next entry in our blog series, where we will be sharing straightforward tips to enhance the accessibility of your web content.

This blog focuses on the role of links, which are undoubtedly one of the most crucial features of the web, perhaps second only to content itself. Whether you're a web developer or a content creator, having accessible links is vital to ensure everyone can navigate and understand your content, regardless of how they choose to interact with your site.

Here are ten tips to help you make your links more accessible:

1. Use meaningful link text

Link text should be concise and clearly indicate where the link leads. Links should make sense when read in isolation, such as when navigating by links alone when using a screen reader and tabbing through the page or listing all the links on the page. Ideally, the link text used for links that lead to another web page should match or be similar to the target page's title, what's displayed in the browser window, or the page's H1 (Heading level one).

For example, "swimming timetable" is a good example of meaningful link text as it clearly indicates where the link would lead. In contrast, "click here" is a poor example as it is unclear where the link would lead.

2. Don't rely on surrounding context

Avoid relying on surrounding text to give your links context. Although this is technically allowed at WCAG AA (though not allowed at AAA level) for links surrounded by text, this practice does not help screen reader users when listening to links in isolation. Often, this is as simple as linking part of a sentence rather than just adding a link at the end.

For example, "how to advertise on this page" makes sense when read in isolation, whereas "click here" does not.

3. Avoid lengthy link text

Which of these links is easier to understand: "click here to read more about how we want to hear your views on how we can improve our housing service and ensure our services best meet the needs of tenants and leaseholders now and into the future" or "how council tax money is used"?

The first option is overly complex, making it difficult for anyone to keep track of what the link is referring to and to where the link actually leads. Long links can also be tedious for screen reader users who have to hear them read aloud.

4. Don’t include action verbs

People know how to activate links, so avoid adding phrases such as "click here to," "tap here to," or "open this link to." These phrases are redundant and degrade the meaning of your link text.

5. Front load where necessary

When listing links with repeated words, try to place the unique information first. For example, instead of "about volunteering opportunities in Leicester", use "Leicester volunteering". This makes the link text more concise and easier to understand.

6. Never use URLs in link text

URLs don’t sound very good when read by a screen reader. Many URLs are not human-readable and contain machine-generated strings of random characters.

For example, "www.jadu.net/asd6a7d/lj3h42kj/asd768a6sd" would be tedious to hear as a screen reader user. Additionally, it's not always obvious where a URL will lead. Use descriptive link text instead.

7. Ensure links don’t rely only on colour

It should be obvious when a link is a link, either from its position on a page or its visual appearance. When a link is surrounded by plain text, include a secondary visual identifier, such as an underline, to indicate that it is a link. This ensures that people who cannot perceive colour differences are not at a disadvantage.

8. Avoid opening links in new tabs

It's rarely a good idea to open links in new tabs as it can disorient users and it may not be announced to users of assistive technology. Leave the choice and control to the user. Only open links in new tabs when strictly necessary, such as for security reasons, and if you must do this, inform the user ahead of time by including text such as "opens in a new tab" in the visual link text.

9. Never disable focus indicators

Focus indicators allow sighted users to see which element has keyboard focus and will receive keyboard input. Disabling focus indicators (e.g., by adding outline: none to the CSS) makes it almost impossible to navigate the site via a keyboard, as users cannot tell which element has focus. Always ensure that focus indicators are enabled.

10. Use alt text to label image links

When a link wraps an image and there is no other text in the link, the image’s alternative text is used for the link's accessible name. Avoid describing the image itself, as this can be confusing. Instead, use the alt text to label the link. For example, an image of a passport that links to a passport renewal web page with the alt text "renew your passport" provides clear and meaningful context when read by a screen reader.

Ensuring your web links are accessible is crucial for creating an inclusive online experience. By following these ten tips, you can significantly enhance the usability of your site for all users. Implementing these practices not only improves accessibility but also creates a more user-friendly environment for everyone.

And remember, accessibility benefits everyone.

Watch the Accessible Links: Web Accessibility Tutorial, Episode 2 video below: