The importance of hyperlinks really doesn’t need to be explained. Hyperlinks are main navigational features of most websites, letting people easily move from one page to another — that is, when they’re built in a way everyone can understand and use.
To improve the accessibility of hyperlinks, make sure they are:
- Clear
- Readable
- Visually distinct
- Color contrast compliant
- Keyboard accessible
Make hyperlinks clear
People without impairment can scan pages to find links to useful information from within the context of a page and the content surrounding a link; however, people who use assistive technology like screen readers will not be able to quickly do the same if hyperlinked text is not clear. For example, a screen reader user may open a list of links on a given page or tab from one link to the next. For this reason, links like “click here” and “read more” fail to provide the information needed for someone to reasonably understand what action that link will perform — and the issue is compounded when there are many links of this kind on a page. Instead, use hyperlinks that are descriptive and clear so that everyone, regardless of how they’re interacting with a website, can confidently and easily navigate. Additionally, all links on a page that go to the same destination should use the same link text.
Readable hyperlinks are friendlier hyperlinks
There are times when spelling out a full web address is appropriate, like when the URL itself is important to a marketing or business goal. That said, hyperlink addresses are often made up of long strings of letters, numbers, and symbols, and those can make the experience tedious and difficult (and annoying) when using assistive technology. Instead of forcing users to listen to a serious of tracking codes and slashes, hyperlink common terms and language to make navigation friendlier.
Make hyperlinks visually distinct
Hyperlinks should stand out in some way from standard text and should not rely on color as the only way of achieving that. Because many people can’t perceive color, links should be underlined or obviously different in some other way so there is no doubt whether text is hyperlinked or static. Color is useful and important to web design, so please note this doesn’t mean color shouldn’t be used, but that color alone is not enough.
Meet color contrast compliance
Color contrast refers to the difference in light between something in the foreground and its background. By using sufficiently-contrasting colors, font visibility is stark enough for most people to distinguish. While meeting minimum contrast ratios is critical to web accessibility, the contrast of hyperlinks is sometimes overlooked by designers and developers. Make sure the colors chosen for hyperlinks, just like for all text, work against all backgrounds they might be placed over.
Our a11y® Color Contrast Accessibility Validator is free and easy to use.
Test all links for keyboard accessibility
Website visitors need to be able to reach and operate all components and navigation elements with a keyboard or keyboard replacement, either alone or along with other assistive technology like screen readers. Thoroughly test all links on every page to make sure that anything that can be accomplished with a mouse can also be done with a keyboard.
Is your website accessible?
Start with a free and confidential website scan or contact us. We look forward to helping you achieve, maintain, and prove digital compliance.
