- Write meaningful link text.
- When linking to documents, indicate the document title and type of file.
- Links that open popups and new windows should explain the action to expect.
- The ALT attribute on linked images should describe both the content of the image and the function of the link.
- Ensure a 3:1 contrast between the text link and surrounding non-link text color.
- Don't rely solely on color to convey links.
- Never use CSS to remove the outline from links. Ensure the focus state is highly visible.
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. Low-vision users and those who are color blind or have other vision issues rely on links that are clearly marked and that respond with a noticeable focus state.
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).
- Use the same text for links that go to the same destination page.
- Don't use the link URL (https://webapp4.asu.edu/programs/t5/majorinfo/ASU00/LAMATBS/undergrad/false) as the link text. (Screen reader users find it tedious to have to listen to long URLs read aloud.)
- When linking to files, it's helpful for users to know 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|
Links that open pop-ups and new windows
Pop-ups and new windows introduce many usability problems and should be employed sparingly. If needed, links that open pop-ups and new windows should contain text explaining the action that will occur to minimize users' confusion.
<a href="https://www.amazon.com/gp/product/1430241942/" target="_blank">Buy
this book (opens a new window)</a><a href="description.html" rel="popup">
Course description (opens in a pop up)</a>
When using linked images, the image ALT attribute should describe both the content of the image and the function of the link. Often those are the same thing, as in the case of button images. (See more about linked images.)
Don't use empty links, like <a href="#">. An <a> element with an empty HREF is not
Visually distinguishable links
Text links should have 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). In addition, secondary non-color visual cues should display on both mouse hover and keyboard focus (see more in Keyboard Access).
Finally, never use CSS to remove the outline from links, unless you intend to replace it with a more visible focus state cue.
How to test
Using your keyboard, tab through the page:
- Are you able to tab to every link?
- Is the destination of every link clear from its link text, even when it's removed from the content?
- Do any links use the same link text but have different targets?
- Are links to documents, files, pop ups and new windows indicated as such?
- Do linked images contain an ALT tag that explains both the content of the image and the destination (if different)?
- Are links visually obvious? Do they have:
- a 3:1 contrast with backgrounds?
- a secondary visual cue?
- distinctive hover and focus states?
Chrome WAVE extension: WAVE marks links with a hand icon, indicating redundant links, ambiguous link text, empty links (hrefs) and more. It will also check that linked images have ALT tags.
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- How to Meet WCAG 2.1 Guideline 1.4.1
- WCAG 2.1 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
- How to Meet WCAG 2.1 Guideline 2.4.4
- WCAG 2.1 Guideline 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
- How to Meet WCAG 2.1 Guideline 2.4.7
- WCAG 2.1 Guideline 3.2.1 On Focus: When any component receives focus, it does not initiate a change of context.
- How to Meet WCAG 2.1 Guideline 3.2.1