When it comes to web design accessibility, links are one of the primary design considerations to focus on. The internet, at its core, is just a collection of pages hyperlinked together. Given how fundamental links are to web design, it’s no surprise that a lot of user-friendly design revolves around link accessibility.
It’s simple if you stick to default layouts and utilitarian page structure, but most businesses aren’t going to be happy just using black text on a white background with blue links. Below, we’ll cover how link appearance affects link accessibility, some tips on writing accessible link text, and talk about other factors that make links accessible or inaccessible. That way, you can develop a process and use appropriate metrics to determine if your links are accessible.
Link Appearance
Color Contrast
Color contrast is one of the key principles of accessible web design. The idea is that important parts of the page should have enough of a color contrast with the background or other page elements that they stand out. Check out our article on accessible color palettes for a more in depth look, but just remember that contrast is described in terms of a contrast ratio, with identical colors being 1:1 (no difference), all the way up to black and white, which have a contrast ratio of 21:1.
Links need to have a contrasting color to both the regular on-page text and the page’s background color. You want a contrast ratio of 3:1 between the link text and the regular page text, along with a contrast ratio of at least 4.5:1 between the link text and page background. On top of that, if your links change color after being clicked on, that alternate color also needs to meet those contrast requirements.
This is why the default display on most browsers involves black text on a white background, with links blue or purple by default. These colors are readable, distinct, and have excellent contrast ratios. When designing your website, you’ll want to use a tool like WebAIM’s link contrast checker to make sure your links stand out.
Making Links Stand Out in Other Ways
Link color contrast is necessary, but rarely sufficient. Another feature you’ll notice in that default browser display picture above is that links are underlined. Not everyone perceives color the same way, and it’s important that links stand out and are easy to parse quickly.
For maximum accessibility, differentiate your links with the color and display of the text. This can involve underlined, bolded, or italicized text. Some sites will even use JavaScript to make a link’s text change when a visitor mouses over it. All of these features help the link text stand out from the rest of the page.
Link Content
Text
Avoid vague links. No one likes to encounter a link reading CLICK HERE with no other context or description. Where does the link go? Why would I bother clicking on it? Even if the link leads me somewhere I wanted to visit, I’m going to be annoyed that it wasn’t presented more clearly.
Links should describe their own purpose, or that purpose should be self-evident from the immediate context of the link. This is such an important part of accessible web design that it’s a success criterion of the WCAG; The official WCAG understanding guide to Criterion 2.4.4 on Link Purpose in Context explains that the purpose and intent of a link should be obvious even without clicking on it.
You may have noticed that I tried to put that principle into practice in that link itself. Even if you didn’t click on that link, you can probably guess that it would take you to official WCAG documentation (and away from the InMotion Hosting Support page), and that documentation would be a detailed explanation on link purpose in context. The linking phrase is a bit long, but if I’d simply said “The WCAG,” or “Official guidance,” the destination wouldn’t have been as obvious.
That guide is worth reading, but the main point of it is that one should avoid vague phrasing while keeping the link a natural part of the text. This is a balancing act — you want link text that is long enough to be descriptive, but not so long as to be unwieldy. A long phrase seems to be ideal; a full sentence for link text can be acceptable in specific circumstances, but phrases are better.
Avoid links that are just a single word or a few characters, as these can be difficult to click on for people with mobility issues and difficult to see for the visually impaired. Always avoid using a URL as a link, as this really slows down people browsing a page using a screen reader.
Icons and Images
If you don’t want a link to consist of a short word or just a couple of letters, you really don’t want your link to consist of a single emoji, a small icon, or a picture that isn’t clearly a link. If you use an image or icon as a link, take care to ensure that its purpose is obvious.
First, remember to add alt text to your image and use that alt text to clearly state that the image is a link and describe where it is going.
Not sure how to write great alt text? Please refer to our guide on alt text best practices to learn more about writing great alt text!
Don’t forget to check your linking images on a variety of devices. Some images can display with unexpected proportions on mobile devices, resulting in images that are too small to click on, or too large to avoid clicking. Adding a border, a caption, or a mouseover state change to draw attention to the link is a good idea as well.
Advanced Considerations
Arranging Links for Page Navigability
People who browse the internet using screen readers will use links as a quick way to skim a page. It’s easy to jump between one link and the next with keyboard shortcuts, which helps someone get a good idea of what’s on a page before reading. Links also make it easy to return to specific parts of the page’s text while reading.
It’s beneficial to people using screen readers if you can space your links out evenly across a page while tying the link text to the main ideas of each section. This isn’t a requirement — it’s not always feasible depending on page content or what material you’re linking to — but it’s a great help when you can manage it. Navigational links, like the table of contents we place at the top of our articles, can serve the same purpose. Consider this design affordance when you are designing web pages.
Small Things to Avoid
Here are a few little things you’ll want to avoid when adding links to your page. First, avoid link overlap — that’s two different links that go to the same place. This can happen accidentally on a page because of auto-generated sidebars, but that’s less of a problem because screen readers can bypass navigation elements and focus on the main text of a page. Just be absolutely sure to avoid overlap in the main body of your page. You also need to avoid link duplication, which would be the same link text being used to go to two different destination URLs.
WAI-ARIA Labels
One last accessibility tool worth mentioning in regards to links are ARIA labels. We’ll be covering these in much greater detail in a future accessibility write-up, but the short explanation is that ARIA labels are extra HTML attributes that you can add to all sorts of page elements — links included — to describe them in much greater detail.
They’re particularly important if you have a web page with many interactive elements. Highly responsive pages can have interactive widgets that exhibit numerous different behaviors. If interactive elements have a linking functionality, use ARIA labels to explain what it is and how it works.
