Facebook Tracking Pixel

How to Create Accessible Links: Best Practices for UX and Compliance

Published By:

woman sitting at desk using computer

TABLE OF CONTENTS

Get Your Free Accessibility & Inclusion Toolkit

Download Now

Accessible links allow web users to navigate through the internet, regardless of disability. In the midst of assistive technology, video captions, and colour contrast, it’s easy to forget about web links. You might not even be fully aware of their impact on web accessibility.

Whether you’re a web developer or content creator, it’s important to have a clear grasp of accessible links. Without them, disabled web users may struggle to utilise your website, which can have consequences for your inclusivity and legal compliance. In this guide, we’ll explain what accessible links are, and how your organisation can benefit from them.

What are accessible links?

Accessible links refer to hyperlinks that have been written in a way to be accessible for disabled web users. Hyperlinks, also known as “anchor links”, are so common, it’s easy to lose sight of their important purpose.

Web users can click on hyperlinks to:

  • Go to another web page
  • Open an application
  • Download a resource
  • Skip to a particular section of the current webpage

Links are the “transportation” of the internet, taking web users to new destinations and features. But just like a train or bus station, those destinations need to be clear.

Get a Free Accessibility Check of your Website

Get a free automated accessibility check of your websites homepage. This will identify and highlight any compliance issues on your website. Followed by recommendations on how to implement the necessary changes to make your website more accessible.

EAA auditing

Best practices for creating accessible link text

So, how can you create accessible links for your website? There are several accessibility best practices you’ll need to follow.

Use descriptive and meaningful text that indicates the links purpose

One of the most common web accessibility mistakes is creating vague link text. Using phrases like “Click here” or “More info” are unhelpful and inaccessible. They provide no clear detail about what the link leads to. That’s important for all web users, but especially those using screen readers, who may only have the link text to understand what to click on.

Include information about the link’s purpose, as well as its destination, where relevant. For example, “Assistive Toolbar” – or if the link goes off-site, “Discover the Assistive Toolbar on the Recite Me website”.

Keep link text concise

Don’t go overboard with your hyperlinks. Whilst they should be descriptive, you should only include vital information needed to understand the link’s destination. Overly long link text can be difficult to read, particularly for those with dyslexia and cognitive impairments.

One way to cut down your link text is to avoid including verbs. For example, if your text reads, “Check out our digital inclusivity checklist”, you could just use the “digital inclusivity checklist” part in the hyperlink, rather than the whole phrase. This is much more concise and focuses on what the user wants to access.

However, you’ll need to consider whether the link text still makes sense out of context. If it doesn’t, it will likely be confusing for people using screen readers. So, you should balance this one carefully, and consult with a web accessibility expert, if you’re unsure.

Ensuring Accessibility for Deaf Customers as an Online Business

Avoid using raw URLs

Don’t just use a URL as link text. These can be very long and aren’t informative for readers. They can also be difficult for screen readers to read.

You should always use descriptive text for your hyperlink text. Make sure it accurately reflects the destination page or file. For example, rather than “https://reciteme.com/”, you could use “Recite Me homepage” for the hyperlink text.

Avoid identical link text for different destinations

This one is self explanatory. Multiple hyperlinks with identical link text can be very confusing for web users, particularly if they’re using a screen reader. Again, aim for descriptive link text that lets readers know exactly what the link leads to.

Use consistent language and formatting

Once you’ve set on a style of language and formatting for your anchor links, keep it consistent. For example, if you use a particular colour for your links, don’t be tempted to change this between web pages. Keep the language consistent for links to downloads, media files, and other link types. This ensures web users know what to expect from your links.

Manchester Council Jobs website using the language feature

Don’t embed multiple links in the same sentence

Multiple links in one sentence can be visually overwhelming and confusing for readers, particularly those with cognitive disabilities. Aim to space out your hyperlinks for clear and uncluttered web pages, wherever possible.

Web page with an overlay showing the Alt tag for an image

Use alt text for linked images

In some cases, you may choose to use an image as a hyperlink. In this case, the image’s alternative text will act as its link text. Alt-text is typically used to provide a textual description of an image, e.g., for screen readers.

However, for hyperlinks, you should make sure the alt-text reflects the purpose of the link clearly. For example, if the linked image depicts a woman in a wheelchair, the alt-text should not contain a description of this image. Instead, its text should be descriptive of the page it links to, such as “Mobility Aids”.

Ensure link text is visually distinguishable

Hyperlink text should be clearly distinguishable from other textual elements. This is usually achieved by writing hyperlink text in a different colour and underlining links.

Aim to include multiple distinguishing features, not just one. This is important, as some visually impaired people may not be able to determine all colours. Links should also be the only underlined text on your web pages, as underlining other text could be confusing.

Real examples of accessible and inaccessible link text

As you learn to create accessible links, it helps to see some real examples. Below, we’ve included examples of both accessible and inaccessible link text to illustrate best practices.

Inaccessible Link TextAccessible Link Text
“Read more”“Read more about our accessibility policy”
“More Info”“Get more information on AODA compliance”
“www.example.com/page.html”“Visit our contact page”
“PDF”“Download our pricing guide (PDF)”
“Here”“Register for the upcoming accessibility webinar”

Why is it important to make your link text accessible?

Accessible link text is essential for digital inclusivity. But what makes it so essential? There are a number of reasons, which we’ll explore in detail below.

Audiobook and Screen reader icon

Improves navigation for screen reader users

Screen readers are an essential accessibility tool for visually impaired people. Accessible links can improve navigation for screen reader users in several ways. For one thing, clear, concise link text can make it easier for them to hear. Secondly, contextual information within hyperlink text can also increase understanding, particularly as these users might navigate through links without reading the wider context of the page.

Supports keyboard-only navigation

It’s not just screen reader navigation that is improved by accessible links. Keyboard-only navigation is also made easier. People with visual or motor disabilities sometimes prefer to navigate digital content using only their keyboard.

Keyboard-only navigation involves using the “tab” key to move between selectable elements on a web page. Clear, descriptive link text makes it quick and easy for these users to find the link they need.

Enhanced user experience for everyone on your website

The ultimate goal of web accessibility is to prevent discrimination and improve the digital access of disabled web users. But, beyond this, accessible links are beneficial for all web users.

They ensure that your links are clear, specific and easy to follow. That helps web users to find what they need and enjoy their experience of your website. In turn, that can boost your company’s reputation and customer/client loyalty.

Accessibility Overlays Header
SEO and Website Accessibility

Boosts SEO performance

Search engines prefer accessible links too. That’s because accessible links include rich information about the meaning and context of your links. If the link text is relevant and detailed, this can potentially give a boost to your website’s SEO, Search Engine Optimisation. In turn, this may improve its ranking in search results, sending extra traffic to your website.

Ensures legal compliance

Digital accessibility isn’t just a “nice to have”. It’s a necessity, enshrined in accessibility legislation worldwide. Accessible links are an important part of creating a legally-compliant website. They ensure that disabled people are not discriminated against when navigating and engaging with your website.

Depending on your location and business type, there are many disability laws that are relevant to digital accessibly, including the European Accessibility Act and the Equality Act 2010.

Avoids confusion and frustration

Accessible links ensure that all web users can access the information they need quickly and easily. If links are confusing or inaccessible to disabled users, they may not be able to use your website at all. User confusion or frustration could lead to missed sales, or for links that are completely inaccessible, even legal action.

Ensure your development and content teams are fully aware of digital inclusivity best practices through online training. It doesn’t have to be expensive either. Recite Me offers a 9-part web accessibility course completely free-of-charge.

Digital Accessibility and Inclusion Toolkit

Our 40-page Digital Accessibility & Inclusion Toolkit helps businesses break down online barriers and make a real impact. It offers practical advice on all aspects of digital accessibility, from writing an accessibility statement to accessible website tips and inclusive hiring.

Conclusion: Get your website in order before it’s too late

They might seem like a small part of your website, but accessible links are hugely important. From website navigation to SEO and legal compliance, there are many reasons to ensure your hyperlinks are kept inclusive. But accessible links are only the tip of the web accessibility iceberg. To reach compliance and create a fairer internet, you’ll need to develop a fully accessible website in line with WCAG guidelines.

If you’re not sure where to start, don’t panic. Recite Me offers a free website accessibility check to help you pinpoint accessibility issues. You can also speak to one of our accessibility experts to see how we can help.

Accessible links FAQs

Looking for a recap or quick summary? Here are a few of our most frequently asked questions to help you get to grips with the essentials:

To create an accessible hyperlink, ensure that the link text is clear, descriptive, and distinguishable from other text on your web page. Avoid using URLs or generic phrases like “Click here” as link text. Instead, only include information about the purpose and destination of the link.

The best practice for hyperlink text is to ensure it is descriptive and concise. Web users should understand their meaning instantly, rather than being required to hunt for context. They should also be visually distinct from surrounding text, e.g., by being underlined and in a different colour.

Underlined links are not required to meet accessibility guidelines, but they are recommended as best practice. They provide a visual cue that the link text is different to surrounding text. Underlining links can be an important indicator to people with visual impairments, who may struggle to spot colour differences.

Visually, an accessible link will appear distinctive from the surrounding web page text. This can be achieved by underlining the link text and using a different colour. Don’t rely on colour alone, as this may not be accessible for some visually impaired people. Link text should also be descriptive.

Descriptive links refer to accessible hyperlinks with clear, descriptive link text. This text should make the destination and/or purpose of the link clear to the web user, so they understand what will happen when they select it. It’s particularly important for those who use screen readers or keyboard navigation.

Related Content