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.

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

The two most basic practices for accessible links are: 

1. Make it stand out. Format the hyperlinked text so you can visually differentiate it from other text, but use something other than color alone for this differentiation. Typically, hyperlinked text is also underlined. 
2. Use descriptive hyperlinked text. Users should be able to tell the purpose of the link just by reading the hyperlinked text. 

In this example from WebAim, the link stands out thanks to the use of blue font and underlined text. The hyperlinked text  "Accessibility Training" concisely describes the destination of the link so the user knows its purpose just by reading the link. 

In addition to visually differentiating your links and using descriptive hyperlinked text, here are some best practices you can incorporate into your workflow to increase the accessibility of your links. 

Use Link Context

If a link falls within a sentence, it's good practice to place additional link context before the hyperlinked text since 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.

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.

Vague Linked Text

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.

Whole URL Text

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

Note: There may be instances that require you list the whole URL. Some examples include: plain text, non-HTML digital spaces; a print-only document; and citation formatting for some citation styles and publishers. 

Labeling a Link as "Link"

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

Redundant Links

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. 

This example shows a "save" icon next to the hyperlinked text, "Save your work." Since the icon and the link would both lead to the "save" option when clicked, they are combined within one hyperlink.

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