How can I make links accessible?
To make links accessible, they need to be uniquely descriptive. This will assist those who use link lists to navigate content and alleviate the need to rely on context to know what a link represents.
The best place to identify a link's target is the text used for the link. For example, "Submit Week 3 Essay" would be a good link for an assignment, and "Access the Oxford English Dictionary online" would be good for linking to a dictionary website.
This article recommends the following for making accessible links:
Avoid commonly misused link text.
The following text is often used incorrectly for links. DON'T use the words listed below as the text for a link!
- "Here"
- "Click"
- "Click here"
- "Link"
- "This"
- "This link"
- The full text of a long URL, e.g., "https://virginia.service-now.com/its/?id=itsweb_kb_article&sys_id=15ff3b8fdb3ac744f032f1f51d9619c9"
Use unique and descriptive link text.
Pictured above are two tables that each include three items for voting.
- It would be tempting to create a table like the first example pictured above. It contains three rows, each with an Item where you can select a link to Vote for the item or Delete it. Because each item only has Vote and Delete for the links, someone using a screen reader might not be able to tell on which item they are voting. Multiple links with the same text on the same page are also problematic for people who need to control their computer or device with voice activation. In this example, they may vote on or delete the wrong item by inadvertently selecting a different link than the one they intended to choose.
- The second example shown would be better, if a bit verbose. Each item's links contain all the information you need to know to select them: Vote on Item 1, Delete Item 1, Vote on Item 2, Delete Item 2, etc.
Add Alternative Text for image links.
A web link embedded in the Rich Content Editor that contains only an image needs concise and descriptive alternative text. The alternative text should describe the purpose of the link (e.g., the site or page where someone will be taken when they activate the link.)
- Pictured above is an example of a logo image in the Rich Content Editor being used as a link.
- Alternative text has been added to the image, so for those who cannot see the image, the link would be Diagram Center Website - examples of image descriptions (opens new window).
For steps to add alternative text to an image, see How can I make images more accessible?
Identify file types in links to downloadable files.
Assistive technology users will benefit from knowing what type of file it is they are downloading. When you link to a file in the Rich Content Editor, include this information in the link text.
For example: essay (Word), article (PDF), presentation (Powerpoint).
Pictured above is an example of a link which points to an article in a course's Files. The link text includes the article's title and "(PDF)": "Bruckner - Of Cligés and Cannibalism (PDF)".
Indicate if a link opens in a new tab or window.
If your link points to a web page that will open in a new internet browser tab or window, it helps to let users know this in the text of the link. That way, they are not confused about where they must go to find the linked page.
For example: UVA Accessibility Resources (opens new window).