Create meaningful links
Ensuring that your links and buttons have concise, meaningful labels allows screen reader users to discern what they are clicking on. Most blind users will navigate your site by pulling up a list of elements, like links, which doesn’t allow them to have the context around the link. For example, they will only hear “click here” opposed to the entire sentence (outside of the link) “to enroll in our class, click here.”
Appropriate use
Concise and meaningful text: Links should have concise and meaningful text as in the examples below:
<a href="/links.html"> Accessible Link </a>
Sometimes you may decide to use a button as a link. Buttons should be coded as buttons, and not as an image. You should avoid using images as links whenever possible. If you need to, the alt text should allow the user to know where that link takes them.
<button type="submit"> Submit Form </button>
<a href="/home.html"> <img src="../path.jpg" alt="home"></a>
Non-color indicators: We cannot use color alone to convey meaning, and that includes indicating to your users that the text is a link with color only. The easiest way to achieve this is by underlining your links.
Below are the WCAG requirements:
- A non-color indicator, such as an underline, must be present on hover.
- The contrast ratio between the surrounding text and the background must be at least 4.5:1.
- The contrast ratio between the link and the background must be at least 4.5:1.
- The contrast ratio between the link and the surrounding text must be at least 3:1.
How to test for compliance
We recommend using an automated checker like WebAIM’s WAVE Browser extension. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues.
In addition, we recommend that you:
- Visually scan your site to ensure all links have non-color indicators.
- Use your tab key to ensure you can navigate to all of your links. When doing so, a focus-indicator should appear. Depending on your browser, this might be a red box around the link. If this does not appear, you will need to check your .CSS file.
- Review the WAVE report to ensure there are no issues regarding your links. This may appear in either the “errors,” “alerts,” or “features” categories depending on the issue.
Common mistakes
“Read more,” “Click here,” “More”: Do not use “Read More,” or any similar verbage, as the entire link. Instead, phrase the whole link as “Read more about our class of 2025.” The latter provides users with the context to what the link is referring to, and what to expect when they click on it.
Buttons as images: Avoid using buttons as images on your page. Screen reader users navigate your site through the elements, and this image will not appear in a list of buttons or links.
Adjacent links: Pages should not present more than one link to the same destination next to each other. One common design pattern is for an image, a heading, and a word like “More” to each link to the same destination, such as in a news list. Assistive technology users may find navigating through several links a bad experience. Instead, provide one link. Either select one element to be the link, or wrap all elements within one link.
