Creating Accessible Learning: Links

Why It Matters

Properly formatting and identifying the purpose of links ensures that users of all abilities can interact with links in a meaningful way that works best for them. Those who use assistive technology (AT), such as screen readers, encounter links differently than those not using AT. Additionally, those who have color vision deficiencies may not be able to distinguish the color of hyperlinked text from regular text. It’s important to visually differentiate links in some way other than color, such as with underlining.

Demonstration: Screen Readers and Hyperlinks

To better understand one “why” of creating accessible links, this quick video shows how screen reader users can choose to encounter links: skip navigation links common to every page, hear a list of all links on a page, or tab through links one at a time. In the bottom right corner of the screen, you can view an illustration of the associated keyboard actions that screen reader users take to interact with links.

Accessibility Guideline: Links

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

A linked text can be visually identified in some way other than color alone. E.g., underlining the linked text. (WCAG 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 Link Context

While link context isn’t a hard and fast rule, it’s a good habit to form!

If a link falls within a sentence, place the additional context before the hyperlinked text. Why? Screen readers users encounter content in a linear fashion. If the context for linked text isn’t read until after the link itself, screen reader users would have to continue past the link to hear more about it, then go backward to interact with the link. Ideally, the user can learn more about the link 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 and make suggested changes 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 OSU library websites are shown side by side. The website on the left is the Library News and includes a hyperlink that says, "IMLS Grant Supports Library OER Project." There is an arrow pointing to the next website to show that this is where the linked text leads to when selected. The title of the webpage is the same as the linked text, “IMLS Grant Supports Library OER Project.”

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.

A sentence with a hyperlink at the end that is different colored and underlined is shown twice. The second shows how the color difference is barely perceptible to someone with Protanopia color blindness.

In the example, we see how the same linked text would look to students with and without protanopia color blindness.

Link Practices to Avoid

Avoid Vague Linked Text

An underlined hyperlink in blue font reads "Click here!" and has a red circle with a line through it in front of it.

For a link to be accessible, it needs to use descriptive hyperlinked text that lets the user know the purpose of the link even without additional context.

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 1: 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.

Note 2: Most citation styles require you to list the whole link within a citation’s reference. In these instances, list the whole link, but be mindful of the placement of said reference, such as within an organized and designated “References” section so the user is expecting these types of links.

Avoid Labeling a Link as "Link"

Adding the word “link” to your hyperlinked text is redundant. Screen reader tools verbally identify linked text for users by adding the word “link.” For instance, the example here may be read out loud by a screen reader tool as, “Link to Contract Draft One link.”

The text "Link to Contract Draft One" is underlined and in turquoise color font.

Avoid Unnecessary Repeats

Avoid having multiple, repeated links to the same thing on the same page, which can cause frustration or confusion for those using assistive tech such as screen readers.

Example

Sometimes links are repeated through the use of linked images or icons that correspond with linked text.

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

To avoid repeated links, the save icon and the “Save your work” linked text are combined with one hyperlink.

Note: Null or decorative alt-text can be used for the icon because the associated linked text describes its purpose