There are three considerations when we talk about link accessibility:
- The text that makes up the link.
- The visual appearance of links (text color and underlining).
- What happens when a link is clicked on.
Use meaningful link text
Meaningful link text tells users clearly what they’ll get if they click a link. This is important for several reasons:
- People who are blind or have low vision often skim through content by having screen reader software read a list of links on the page. A link that just says “more” wouldn’t tell them where that link goes or provide clues about surrounding text.
- People who use speech recognition software need to speak the link text in order to “click” on it. Imagine what this experience might be like if a person has to read a long URL, or if there are multiple instances of “click here” on one page.
- Sighted users will understand where a link goes and what happens when they click it.
A few more tips about link text:
- Don’t use URLs.
- Don’t use the word, “link” in a link– it’s redundant.
- If you link to the same thing twice on a page, use the same link text in both places.
- If all of your links go to different places, make sure all of the link text on your page is unique.
What are the exceptions?
You may use a URL when:
- It’s very short (typically a home page), and communicating the web address is important. Example: IRS.gov
- “.com” is in the business name. Example: Hotels.com
Link text should provide clear understanding of where a link goes, but also be as brief as possible. Here are some examples of links in action:
- Correct: To help save birds, learn about Portland Audubon’s Lights Out program.
- Wrong: To help save birds, learn about Portland Audubon’s Lights Out program: https://audubonportland.org/our-work/protect/habitat-and-wildlife/urban/reducing-wildlife-hazards/bird-safe-building/lights-out/
- Wrong: To help save birds, click here to learn about Portland Audubon’s Lights Out program.
- Wrong: To help save birds, visit this link to Portland Audubon’s Lights Out program.
Underline links
It’s a best practice for links to be underlined. (And for any text that is not a link, to not be underlined.)
If links are underlined, they don’t need to be a different color. (Although, who doesn’t love the deep blue of classic link text?)
If you are tremendously opposed to the appearance of underlining, you can meet the WCAG requirement for link text by making sure it has sufficient color contrast:
- 3:1 ratio between link text and non-link text –and–
- 4.5:1 ratio between link text and background color
For non-underlined links, blue is the best choice. This is because people with yellow-blue color blindness see blue as turquoise and people with red-green color blindness see it as blue.
Here are a few shades of blue that meet the requirements if used with black text on a white background:
- #3344DD
- #531FFF
- #6857FF
What are the exceptions?
Navigation menus are exempt from this requirement because they are understood to be links.
Tell users what to expect
Users expect links to jump to another web page or somewhere else on the same page. If something different will happen, you should tell them that.
If clicking a link downloads a file, tell them that by stating the file type and size in parentheses, like this:
Seabirds of the Pacific Northwest (PDF, 1.4 MB)
Include the file type and size in the hyperlink so everyone gets that information. Otherwise, screen reader users who navigate via interactive elements would not know this is a download.
If clicking the link will open the page in a new tab or window (not a best practice for accessibility), include that in the link text, like this: Portland Audubon’s Lights Out program (opens in new window)
More resources
- WebAIM: WCAG 2.0 and Link Colors
- W3C’s list of link colors that meet the requirements for non-underlined text links