Write Descriptions for Links

A descriptive link is a hyperlink that provides users with context that allows them to understand where clicking the link will take them. Additionally the use of descriptive text in hyperlinks allows website visitors to scan the site for information, find external resources, and select which links best suit their needs.

Screen reader users often navigate websites by going from link to link using the tab key. This is why providing links that make sense stand-alone, outside of the surrounding text, is especially important.

For example, imagine how the following links would be presented to a user who is using a screen reader and tabbing from link to link (note that the following are not actual links, they are just styled as such for this example). In the first example, the Screen Reader would only hear the words “click here” twice without receiving any understanding of what they would be clicking for. In the second example, the screen reader would read out the URL, which would be tedious and uninformative especially if it was a long address.

Don’t do this:

Before you continue, click here to see a video of a giraffe in the wild. When you are ready, click here to take the quiz.

Don’t do this:

Before you continue, click on the following link to see a video of a giraffe in the wild: http://www.examplegiraffe.org/?/post/2021/12/08/$5982-!

When you are ready, click on the following link to take the quiz: http://examplegiraffequiz.org/rkuDAn0Wy3WXomoI8qGAAe3dAng/tXdLwACFPVp

Do this:

Before you continue, watch a video of a giraffe in the wild. When you are ready, take the quiz on giraffes.

• Communicate the purpose or function of the hyperlink in the link name.
• Be as descriptive as possible without making it too long because some assistive technologies will read the entire link text before moving to the next text content. Aim for less than 120 characters.
• Make the link part of your sentence.
• Ask yourself: "Will the user know where this click will take them just by the link text alone?" If not, then you need better descriptive text.
• If you use only an image as a link and there is not an accompanying text version of the link, that image is functional, therefore the ALT text of the image needs to describe the function and not be descriptive of the actual image.
• For links that appear within the body of your page (vs. links in menus or buttons), always use an underline. Do not just use colour to distinguish a link and do not underline text that is not a link. Users with low vision and colour blindness use the underline to distinguish links from neighboring text.

For examples and information about how to make links accessible, specifically when creating web pages, see the following: ESDC Web Accessibility Course, Links.