- Write meaningful link text.
- The ALT attribute on linked images should describe both the content of the image or the function of the link.
- Ensure a 3:1 contrast between the text link and surrounding non-link text color.
Links that clearly communicate their destination help users decide what action to take. For people using screen readers or other assistive devices, meaningful links can save much time and frustration.
Screen readers can generate and read aloud a list of the links found on a page. This is a useful way to navigate, provided the links are descriptive. For instance, a list of "Read more" links doesn't adequately describe the links' various destinations. Using the destination page's title or subject matter as the link text is much more informative.
Other tips for writing accessible link text include:
- Use unique text for links with different destinations (two or more "Click here" links going to different pages is confusing). (Developers: See CSS methods for adding screen-reader-only destination text to links with repetitive text.)
- Use the same text for links that go to the same destination page.
- Don't use the link URL (https://www.google.com/search?q=long+urls) as the link text. (Screen reader users find it tedious to have to listen to URLs being read aloud.)
- When linking to files, it's helpful for users to know the file title and the file type they're opening or downloading.
|Unhelpful link text||Meaningful link text|
|Click here to learn the difference between animal, vegetable and mineral.||Learn the difference between animal, vegetable and mineral.|
|Take courses online this summer (read more)||Take courses online this summer|
|You should read this article about the Savannah cat.||You should read this article about the Savannah cat.|
|http://school.asu.edu/courses/sum-abroad/sum-app.pdf||Summer Application (PDF)|
|http://webaim.org/techniques/hypertext/||Links and Hypertext|
When adding linked images, the image ALT attribute should describe the content of the image or the function of the link. Often those are the same thing, as in the case of button images. (See more on linked images.)
Low-vision users and those who are color blind or have other vision issues rely on links that are clearly marked. Text links should have a 3:1 contrast between the link text color and the surrounding non-link text color.
However, don't rely solely on color to convey links. Instead, always employ a secondary visual cue, such as an underline or border (see more in Color and Contrast).