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 in the link text; for example: "Submit Week 3 Essay," "Visit Entomological Society of America," "Access the Oxford English Dictionary online."
This article recommends the following for making accessible links:
Choose how to view the steps.
Video Guide
Step-by-Step Instructions
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 assistive technology, such as a screen reader, might not be able to tell on which item they are voting.
- 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.
An HTML web link embedded into the Rich-Text 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 the user will be taken upon activation of the link.)
- Pictured above is an example of a logo image in the Rich-Text 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-Text Editor, include this information in the link text.
For example: essay (MS Word), article (PDF), presentation (MS Powerpoint).
Pictured above is an example of a link which points to an article in a site's Resources. This link includes the article title and (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).