Optimize links for accessibility
Optimize links for accessibility
1. Write link text that is descriptive, concise, easy to read, and gives the reader information about the destination.
Avoid: Non-descriptive link text such as click here, learn more, link to [destination], or info. Linking more text than is necessary to provide context, like full sentences. Linking full URLs especially if they are long. Keep in mind that screen-reader users have to listen to the whole URL read out loud. If you do want to link a URL, use a link shortener like Bitly or TinyURL.
2. Make sure all links use the tag in HTML, instead of emulating links with JavaScript, so that links have built-in accessibility features.
If working with a developer, tell them to use anchor tags for all links. If you’re working in a CMS like WordPress, highlight the text you want to link and click the Insert Link button in the text editor, which should automatically format the hyperlink with an anchor tag behind the scenes. This ensures links have the proper accessibility features, like being keyboard-focusable and announced as a link by screen readers.
3. Avoid duplicate links that go to the same destination and duplicate link text on the same page.
For example, instead of linking each element in a section that you want to link to one destination, like a header, image, and call to action, choose only one element (except the image) to use as the link, or wrap the elements in one link.
4. Style your link text with a persistent color indicator, like blue link text, and a persistent non-color indicator, like an underline.
For example, blue link text next to black paragraph text is a color indicator of a link. An underline under link text is a non-color indicator. Use a link color contrast checker that complies with WCAG guidelines, like WebAIM’s Link Contrast Checker, to check your color choice’s accessibility. If you do not want to underline the link by default, the text must have at least 3:1 contrast with surrounding body text, and a non-color indicator on hover.
5. Create two distinct hover and active styles that each include a color indicator and non-color indicator.
Make sure your web developer creates two distinct hover and active styles so that users can easily tell the difference between hovering the mouse over the link vs. clicking on the link. For example, the hover style may make the shade of blue darker and show an underline, while the active style changes the link text color to red and adds a border around the link. Alter the color or background-color properties for the color indicator, and alter properties like text-decoration or font-size for the non-color indicator.
6. Ask your web developer to create a focus style for your website that is easy to see with high contrast from the background. This helps keyboard-only users see which link is selected.
To see what your website’s focus style looks like, open your website and hit tab on your keyboard until it starts cycling through the interactive parts of the website. Notice how the default focus style may not always be easy to see on sections of your website, like sections that already have a blue background, which is why it’s better to create a custom focus style for your site. You might need to change outline, border, and box-shadow properties to make the link stand out. Follow non-text contrast guidelines.
7. Increase the area of each text link to a minimum of 44px wide and 22px tall.
This is only the minimum size requirement. You can make it larger.
8. Add margins or padding around links to make navigational links easier to click accurately.
Adding whitespace around links is especially important for links that are close to other links, like in a navigation bar. For mobile devices, make sure the margin or padding is big enough to easily tap, but not so large that it’s easy to accidentally tap. Experiment with the size to strike that balance.
9. Switch any image-based links - like image-based buttons, navigation items, or CTAs - to text-based links.
Alt-text’s traditional purpose is to describe the image, but if you use an image as a link, then the alt-text has to describe the link instead. This contradicts alt-text’s original accessibility purpose. Alternatively, add a text link below the image.