Links

Links need to be accessible for people with Visual Disabilities , Cognitive and Neurological Disabilities , and other accessibility concerns. Links also need to be understandable for people who use English as a Second Language. Accessible writing needs to be addressed both at the style of writing (i.e. the voice and tone need to be understandable and clear) and at the structure of writing (i.e. the link needs to be in an accessible structure for screen readers and other software).

Link text is the content within an anchor tag. Anchor tags must not be empty; if they are, they can be navigated to but they don’t say what they are and that confuses people.

Do

• Make sure a link makes sense out of context. Screen reader users often navigate from link to link, skipping the content in between – essentially scanning the page – so links that simply say “click here” a dozen times are useless.

• Be as concise as possible (while still respecting context).
• Put the most important information first. If the link is to a Products page, start the link with Products then mention other details like opening in a new window.
• Be mindful that extremely short links (like single-letter alphabets for an index) may be very difficult for someone with Physical Disabilities  such as cerebral palsy to click with a mouse. If using these links, make sure to make the target area bigger.
• Use human-readable text instead of a URL, unless the URL is short and succinct (like apple.com) Nobody wants to sit and listen to your URL.
• Put lists of links in a list format so that the screen reader pauses between entries.
• Use a consistent naming scheme for site locations. The “Contact Us” page should be called “Contact Us” in every link, not “Contact us” on one page, and “Contact” on a second.

Don’t

• Don’t code an empty link. They must always contain text or an image with alternative text. (Background images are not considered an image!)
• Use “Click here”, “Learn more” or “Click here to learn more” as your link titles. Without context these make no sense, and they’re not guaranteed to be read in context. (Further, the user might not be clicking a mouse.)
• Include the word “link” in the link (i.e. “link to Products”) because screen readers tell users that the link is a link automatically.

Images in links

In the case of an image, the image’s alt text is read as the link text. Note that in these cases, the alt text needs to describe the content of the image and the function of the link. In some cases this can be as short as “Products” and in others it may need to be longer, such as:

<img src="/salesincrease" alt="Chart showing 10% sales increase over the last decade with link to more sales data"/>

If the image doesn’t have alt text and it’s the only thing in the link, the screen reader will read the image file name or the URL being linked to. Don’t do that to people.

Alternatively, if the image is purely decorative and there’s text in the link that adequately describes the link, you may be able to set the alt tag to “” (an empty string) so that the image isn’t read out to the user.

In-page links

Make it clear by the presentation or content that in-page links (also called anchor links) are in-page links. Most screen readers announce in-page links as such, but sighted users with other disabilities (especially cognitive disabilities) may not understand what happened when they clicked a link.

Pop-ups, new windows, frames, and external websites

• If you don’t have to pop a new window or new tab, don’t. There’s a lot of debate in the accessibility community about whether it should ever be done, because it can be very confusing for the user. Rather than say “never” we say “use caution”.
• When you do link to a new window, frame, external website, etc, make it clear by the presentation or content that you’re doing so. If saying so in the content of the link, do so at the end of the link name (i.e “Products – opens in a new window”).
• If using an icon to present that the link goes to a new window, make sure the icon is communicated through its alt text.
• Make it clear when a link opens a file such as a PDF, powerpoint presentation, or similar. Neither browsers nor screen readers do this today, so the onus is on us to tell the user they’re about to view a PDF. Note that the callout needs to be in the link (so that the user hears it) i.e. <a href=”1040.pdf”>Tax form 1040 (PDF)</a>.

Additional Resources

• Links and Hypertext, Link Text and Appearance, and Hypertext Links by WebAIM cover writing accessible links in pretty much all their forms.
• WebAIM’s article on WCAG 2.0 and Link Colors specifies the correct display and style to meet Level AA on links.
• The WCAG has a list of colors that are accessible against white background with black test, but notes that using color as the only indicator of a link is problematic. They strongly recommend using underlining or another indicator of a link.
• Making Accessible Links: 15 Golden Rules for Developers by Gian Wild on Sitepoint covers a little more on the technical side and a little less on the writing style.
• Improving UX for Colorblind Users by Adam Silver on Smashing Magazine covers the impacts that using only color to identify links can have on those who are colorblind.