Accessible link guidelines

• 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.
   

Meaningful link text

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.

Linked images

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.)

Links should have a 3:1 color contrast

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).

• Links that open popups and new windows should explain the action to expect.
• Never use CSS to remove the outline from links.
• Don't use empty links like <a href="#">, which aren't accessible.
• Provide a destination on non-unique links.

Links that open pop-ups and new windows

Pop-ups and new windows introduce many usability problems and should be used sparingly. But if one is needed, links that open pop-ups and new windows should contain text explaining the action that will occur to minimize users' confusion--for example, "Link opens new window."

Examples for developers:

<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>

Don't remove the CSS outline on links

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.  Never use CSS to remove the outline from links, unless you intend to replace it with a more visible focus state cue.

Secondary non-color visual cues should display on both mouse hover and keyboard focus (see more in Keyboard Access).

Empty links

Don't use empty links, like <a href="#">. An <a> element with an empty HREF is not
keyboard accessible (see more in Javascript).

Destinations on "Read more" links

When design mockups require you to use repetitive links such as "View" and "Learn more," you can still make them accessible by providing destination information for screen reader users. See how to provide a destination on non-unique links.