Skip to Main Content

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

The purpose of a link can be determined from the link text alone. (2.4.4; A)

A linked text can be visually identified in some way other than color alone. E.g., underlining the linked text. (1.4.1; A)

(Note: There are ways to add to link context with coding that are not covered here)

Use Sufficiently Descriptive Text

The purpose of a link can be determined from the linked text alone.

A portion of the Tampa Bay Lighting's website is displayed. There is a box entitled "Resources" and two links are listed underneath it. The links, which are circled to highlight their presence, read as follows: "Login to My Bolts Nation" and "Chat with ThunderBot."

In the above example, the purpose of the two links listed under “Resources” can be determined simply by reading the linked text.


Use Context

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.

A sentence is displayed that reads, “You can review the rough draft of the contract by visiting Contract Draft One.” The words, “Contract Draft One” at the end of the sentence are underlined and colored turquoise to signify linked text.

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.

Two website windows are side by side. In the first one on the left, the link text says, "IMLS Grant Supports Library OER Project." There is an arrow pointing to the next website window to signal that this is where the linked text leads to once clicked. The title of the webpage is the same as the linked text, “IMLS Grant Supports Library OER Project.”

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.

A black "save" icon is to the left of the words, "Save your work" in bold, blue font. Both are underlined.

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.

An online textbook entitled "ENGL 1113 Online Library Sessions, Holly Luetkenhaus" is shown on the left. Beneath it is a box with a drop down arrow, which says "Download this book." To the right is the box that dropped down and it lists links to six different types of book file downloads.

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.

The same sentence is displayed twice. It reads, “You can review the rough draft of the contract by visiting Contract Draft One.” In both, the words, “Contract Draft One” at the end of the sentence are underlined. The first sentence uses green color font, but a deep pink color font for the underlined text. In the second sentence, the words all appear to be a grey font.

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.

Two sentences read, "Want to learn more? Click here!" The first sentence is in grey, bold font and the second sentence is in turquoise, bold font and is underlined.

Avoid Whole Links

Screen readers will read out the entire link if it is listed, as in the example below.

A very long link with a bunch of random letters and numbers is displayed.

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.

The sentence "Contract Draft One is where you can review the rough draft of the contract" is displayed. "Contract Draft One" is underlined and in turquoise color font.