Hyperlinks are found on every web page across the internet and are one of the most basic, yet most important, aspects of web accessibility.
A hyperlinks sole purpose is to enhance the user journey for website visitors, by swiftly and easily directing them to the key information they require. However, if these links are not used or written in an accessible way, then this can cause a navigational nightmare for many users of assistive technology.
This blog looks into the basics of writing inclusive content links, through to some handy tips for developers. This will help you to remove common online barriers and enhance your website’s level of accessibility.
Who benefits from accessible hyperlinks?
We’ve all clicked on a link at some point in our life, which is broken or directs you to a wrong page. Well, though we aren’t talking entirely about the same premise here, it still provides the same annoying outcome for many users.
Hyperlinks aren’t used in the same way for everyone online. For example:
- Users with motor impairments use links to bypass content they aren’t interested in; helping to avoid unnecessary keystrokes.
- Clear links can help people with cognitive impairments and learning disabilities to easily move around a website.
- Blind users and people with low vision rely on links with concise context to be read aloud to them by their screen reader to be able to navigate and explore information and services.
You’ll be pleased to hear that by providing greater context within your links, it will also benefit you. Along with helping your online audience, it can also help to boost your Search Engine Optimisation (SEO) rankings too.
How to provide context for your users with hyperlinks
So far, in the 2023 WebAIM Million report (external link), which is based on the accessibility of the top 1 million home pages that have been audit tested; 17.3% were found to have ambiguous link text. This means that on average each page had 5.3 instances where the link text provided no context to their users, leaving them unsure where or what they would actually be navigating to. This is why it’s crucial to always provide a descriptive link stating its function on websites, applications, and within documents.
Link text should be concise yet comprehensive, for example:
- This is bad: Click here
- This is good: Visit the Digital Accessibility Matters campaign portal
Hyperlinks should describe where the users will be directed. By simply writing ‘click here’ or ‘read more’ on a link, it gives no clarity isolated from its context for users of assistive technology. When writing link text, think about how you would write your main H1 page title (which we hope you are doing), this should be along the same lines as that.
How to use hyperlinks on social media
Obviously, on social media you can’t edit a hyperlink in the same way as you can on a website or within a document. This means that you have to put the link address rather than writing alternative wording.
Sometimes, a full website address can be massive in length, full or words and numbers that the users wouldn’t want to know. As a screen reader will read out the entire address, it’s better for your social followers to get a shortened version of the link. This will also help with your precious character limit on platforms like Twitter. You can do so, by using free websites such as Short URL (external link).
How to write links for downloadable content
When using a link to highlight resources that individuals can download, provide the file type and size of the download. This is particularly important for people using mobile phones, which might have limited space or without the facility to open certain documents.
Here’s an example of how to write a link for a download:
- This is bad: Download here
- This is good: Download the Design For Everyone graphic [PNG] [111KB]
Should hyperlinks open in a window and what to do with external links
It’s important that links don’t open a new web page window when selected, and this includes external website links too. This will simplify navigation for your users, giving them control whether they want to go back or open a new tab themselves if they wish. If this isn’t the case, you need to label your link to state that.
The one exception to this rule is within a form element, for example, if someone needs to refer to information such as terms and conditions. This will make sure they don’t lose any information they have already completed.
Along with the above advice, it is also important to let users know when they will be directed to an external website. This can be done either making that apparent within the link text, or by the use of an icon, which has an ARIA label associated with it to provide context to screen reader users.
How to use links on imagery
Normally, an image on a web page needs to have alt text that describes what the image is of, unless it is a decorative image.
If you have an image that is being used as a hyperlink, this isn’t the case. For links on imagery, it’s important to make your alt text directional. For example it should read as “return to homepage.”
Make hyperlinks visually distinctive
Hyperlinks need to be easily identified within a document. Most software when adding a hyperlink automatically underlines the link and changes it to blue in colour, which on a white background gives a good colour contrast to the original text.
It’s important to keep your links underlined and use a strong contrasting colour from the background, so they can be clearly seen. This should also include a visible reference when an active link is navigated to or hovered over on a web page.
Hover over one of the links below for a good example:
Further support with accessible content creation
As you can see, even with something as small as one hyperlink, there is a lot to consider when it comes to accessibility.
If you need further advice on how to make your content accessible, we offer consultancy and have a range of training that can guide you through your accessibility journey.
