Creating Accessible Learning: Links
Why It Matters
People who use screen readers encounter links differently than those who aren’t using screen readers. Users of this type of assistive technology can usually choose to hear a list of links on a web page, can choose to tab from link to link, or can choose to skip links that they’re not interested in.
Properly identifying the purpose of links ensures that those using assistive technology can clearly identify and explore links as they see fit.
Additionally, people who have forms of color blindness may not be able to distinguish a link from regular text. It’s important to also visually identify links in some other way, such as with underlining.
Accessibility Guideline: Links
Use Sufficiently Descriptive Text
The purpose of a link can be determined from the linked text alone.
In the above example, the purpose of the two links listed under “Resources” can be determined simply by reading the linked text.
If the link falls within a sentence, provide link context within the same sentence, but before the user gets to the link itself. The goal is for the user to know what the link is without having to leave the link and lose their place.
Match Linked Text to Page Title
The linked text matches the title of the page that you're linking to. This good practice provides continuity for the user.
Avoid Unnecessary Repeats
Sometimes links are repeated in various ways on a webpage, such as through the use of linked icons or images that correspond with linked text. Combine them to create a single link.
In the following example, the save icon and the “Save your work” linked text are combined with one hyperlink. Note: Alt-text is not needed for the icon because the associated linked text describes its purpose.
In the next example, one book has six different links for downloading it in various formats. To avoid hearing the title of the book with each linked file format, “Download this book” is the descriptive text, and each linked file name simply reads out the file type.
Differentiate Linked Text
Differentiate linked text from non-linked text in some way other than just color alone, as those with color blindness may have difficulty distinguishing between colors.
Underlining linked text is one of the most widely-used methods of differentiating linked text.
In the example, we see how the same linked text would look to students with and without protanopia color blindness.
Link Practices to Avoid
Vague Linked Text
Vague linked text may confuse the user, who will not know what the link leads to.
Avoid Whole Links
Screen readers will read out the entire link if it is listed, as in the example below.
Note: Only include the whole link if it is a digital space that does not allow hyperlinking, such as a plain text email, or a static document, such as a print-out.
Avoid Incorrect Context Order
If the context for linked text isn’t read until after the linked text itself, the user would have to tab past the link in order to hear more about it.