What is an 'accessible link'?
Accessible links are hyperlinks that can be used by everyone accessing your content. This means that your links are descriptive, visible, and informative.
Why are accessible links important?
It is important to make sure your links are accessible so that:
- All users can understand exactly where a link goes when it is selected.
- Screenreader users can skim through content by having a list of links read aloud. A link that just says ‘more’ does not tell users anything about where the link takes them.
- Folks using speech recognition software can speak the link text out loud to ‘click’ on it. It is very difficult, or impossible, for folks to select their preferred link if they are all the same (‘click here’) or the link has a very long URL.
What are the requirements for accessible links?
Link text must be descriptive.
Descriptive link text tells users exactly where the link will take them if they select it. These links can be understood in context, can be easily said out loud, and tell users exactly where they go if they are ‘clicked’ on.
Example of descriptive links
- To help save birds, learn about Bird Alliance's Lights Out program
Examples of non-descriptive links
- To help save birds, learn about Oregon Bird Alliance’s Lights Out program: https://birdallianceoregon.org/our-work/protect/habitat-and-wildlife/urban/reducing-wildlife-hazards/bird-safe-building/lights-out/
- To help save birds, click here to learn about Oregon Bird Alliance’s Lights Out program.
To make sure your links are descriptive:
- Don’t use full URLs. These can be difficult to listen to, difficult to say out loud, and might not make it clear where the link takes users.
- Don’t use terms like 'click here', 'read more', or 'next' as your link text. It can be unclear to users where these links take them, especially for folks using assistive technology.
Link text best practice:
- Avoid using the word ‘link’ in your link text.
- Use identical text for links that go to the same destination, and different text for links that go to different destinations.
- If a link downloads a file or opens a new window, let users know in the link text. For example:
Links must be visible.
We recommend always underlining your hyperlinks and not underlining text that is not a hyperlink. This makes it much easier for folks to understand what is link text, and what is not.
If link text is underlined, it does not have to be a different color.
If a link is not underlined, there are strict color contrast requirements that must be met.
For links that are not underlined, your link text must:
- Have at least a 3:1 contrast ratio to the surrounding body text color, AND
- Have at least a 4.5:1 contrast ratio to the background color, AND
- Underline the text when a user hovers over the link with a mouse, or the link receives keyboard focus.
Use WebAIM’s Link Contrast Checker to confirm your link text meets color contrast requirements.
How do I test my accessible links?
Learn more about manual testing.
How to test
- Run the WAVE tool. WAVE will identify any 'suspicious link text'.
- Visually review your site for links that are not descriptive.
- Confirm that you can tell where all links take you out of context.
Most common issues.
- Using full URLs. Don't add a link that is a full URL. This makes it more difficult for all users to find what they need.
- Using link text like 'click here', 'more', or 'article'. Your link text needs to make it clear where the link takes your user, even if it is out of context.
Easiest way to fix it.
Update the link text for non-descriptive links. Make sure it is clear to users where a link takes them.
More Resources
- Links and Hypertext - WebAIM
- How to Add Links - Open Berkeley
Dig into WCAG
Here is additional information about WCAG 2.1 AA Success Criterion related to links.