Many websites have not considered the accessibility of their links for visually impaired people. However, there are ways to design better links. We’ve put together some information on how to improve the accessibility of your users’ experience, even those who are visually impaired.
Meaningful Links
A hyperlink is a combination of a clickable element and a URL. This may include a word, phrase, or image, depending on the site’s design. However, here, we’ll take a look at text links and their usability & accessibility.
For one thing, links should not be a jumbled mess. Nothing looks more spammy or causes confusion than messy links. What’s more, links that are marked with the words “here” or “this” may make it more challenging to aim at cursors or fingers.
In addition, the link is also not transparent. People may wonder what’s behind the link (does it lead to a file, a page, an article, or a form). Making a user feel wary is the last thing you want when using links.
Instead, URLs should be attached to phrases that are simple and easy to understand. The text should provide information on the destination, so site users don’t have to guess. These also present more convenient targets for clicking.
What’s more, meaningful links include context; they may combine a topic and a format to make it easier for site users to understand.
Exposing URLs
Next up for consideration is exposing URLs. Web addresses that are nothing more than a mix of letters, numbers, and symbols are confusing, even if they’re short. Instead, exposing the complete URL is a better option. Here, again, site users don’t have to guess where they’re going. And if they need to copy the URL, it’s much easier when the URL is spelled out for them.
Here’s an example:
- Confusing short URL: $McOP10%LhRQ2FyW
- Better URL format: http://www.company.com/contact-us
While using URL shorteners is OK, it’s best to completely write out the URL. Random symbols and jumbled letters make site users suspicious. Instead, the longer URL is informative and lets individuals know where they’re heading.
Download Links
Then there are links that lead to downloadable content. Here, again, it’s essential to embed the link into a meaningful phrase and inform users about the file format and the size.
Why is this important? Because the format provides information on how to use the data (for instance, if it’s editable or read-only). And the file size is an essential bit of information for site users. Some may still be using slow connections and/or have limited storage available on their devices.
In addition, if you need to share several files, they should be designed correctly and scannable. Making them easy to read and understand helps site visitors get the right version of the file for their needs.
Here’s are some examples:
- Report on site links (EN).docx (informs the user that the report is in English in MS Word docx format)
- Report on site links (DE).docx (informs the user that the reports is in German in MS Word docx format)
- Download .zip (MacOS) (informs the user the download is a zip file for the Mac operating system)
- Download .zip (Windows) (informs the user the download is a zip file for the Windows operating system)
Links vs. Buttons
A webpage may contain several links, not all of which are essential to the user. So, to get readers’ attention to a primary link, then you may want to make a button rather than a link. Buttons can be straightforward and easier to understand:
- “Buy tickets”
- “Sign up for the newsletter”
- “Download the file”
There may be times when a button isn’t the best choice, so you may want to consider putting the link on a separate line. Be sure to make the text bold and add space above and below the link to make it stand out.
Here, again, the text must be short, start with a verb, and have an honest call to action. For instance, there’s a vast difference between:
- Download the report (implies instant access after clicking)
- Get the report (implies the user must first take some action to get the report, such as providing their name and email address)
Link-Rich Texts
It’s usually not a good idea to fill a sentence or paragraph with several URLs. So, it’s imperative to consider whether all the links are truly necessary. If so, then you may want to include them as a bulleted list under or to the side of a paragraph or under a title (such as “Resources”).
Grouping the links makes it easier for users to understand where to click and what to expect. But what about those times when an action is needed? In that case, you may want to make a button for the primary action and include the links below that in a bulleted list.
Link Accessibility
Accessible links are both clear and make the page look more organised. However, they would also work properly. There are also guidelines and standards for link accessibility from the WCAG (Web Content Accessibility Guidelines). These are the most famous digital accessibility standards in the world. Here are some of their recommendations for links (that include some non-visual features).
Distinction
The WCAG recommends not relying solely on colour to distinguish a button or link from other text. Many sites rely on making links blue; however, those who are colourblind can’t see these links. So, the WCAG recommends underlining the inks and bolding the text.
Follow the link Follow the link Follow the link
Colour Contrast
Links are essential for interaction on a website and must comply with contrast standards. The WCAG offers these two levels of contrast compliance:
- AA (medium, used by many sites to reach a mass audience)
- AAA (high, often used on government sites and communities for people with disabilities)
Focus State
Most popular browsers use an embedded accessible focus such as a bold blue frame around an input field, a dropdown, buttons, and more. However, the focus may be removed or visually changed so the focused link becomes difficult to see. The link may appear faded, for instance.
Instead, choose a colour to highlight the link. For example, a strong yellow-orange highlight can make the link more obvious to users who are visually impaired.
Optimisation for Screen Readers
Blind users are not able to see the web. Instead, they listen to it through screen readers. These are assistive programs that transform the text into robotic speech. Blind users can then navigate with a keyboard and use a variety of shortcuts to get past headings, buttons, and links rather than listening to all the text on the page.
When you optimise the text to remove wordiness on a web page, keep the links clear for screen readers. If you don’t, blind site users may hear something like this:
- Link, English…link, German, and so on.
Making the link self-explanatory may sound more like this:
- Download the document in English – link, download the document in German – link, and so on.
On a news page, make links self-explanatory in this way, rather than using “Read more…”:
- Link = title
Duplicated Links
Using multiple identical links is also confusing and not the best practice for websites. A site may attach the web address to an article title, an image, and an entry sentence. For those who have good sight, this isn’t a problem. However, for blind users, they are faced with the same information multiple times. They face a more challenging time sifting through the information, and it takes longer for them to reach it.
Instead, it’s best to make the entire block a link rather than using multiple links pointing to the same destination.
What about emails that contain a link to something like a Zoom meeting? If the link is repeated too many times, it looks like a mess to sighted users. And for those who are visually impaired, it is more trouble and confusing to go between multiple, duplicate links.
Instead, it’s best to create one primary link that’s easily seen by everyone, rather than a bunch of random links throughout the message.
Summing It Up
The goal is to make links more readable and easier to find on a web page or email messages. Then, use these best practices to help sighted, and visually impaired users find the information they need and want.
