how to make accessible hyperlinks

To make hyperlinks accessible, they must include the right information and be distinguishable from the surrounding items on the page.

That means they must both be coded correctly and be styled correctly.

Hyperlinks <a> must include the following attributes:

• ref, which refers to your link;
• a target, where your link should open, such as in the same tab or in a new tab or window;
• and meaningful wording in the link.

First, the hyperlink should navigate to a working link, the <code>ref</code>. Write <code>ref=”http://www.yourlinkhere.com”</code>

Second, decide where you want that link to open. Do you want your link to open in the same tab or a new tab or window?

• target="_self", which opens in the same tab.
• target="_blank", which opens in a new window or tab.

For example if you are linking to the restaurant the Clam Box of Ipswich in Ipswich, Mass., and you want it to open in a new window, your hyperlink should be written similar to this, where in this example we’ve broken it down line-by-line so you can see each attribute:
<a href="https://clamboxipswich.com/"
target="_blank">the Clam Box of Ipswich</a>
This will render as: the Clam Box of Ipswich.

If you are linking to the Iver’s Acres of Clams in Seattle, Wash., and you want it to open in the same tab we’re currently using, your hyperlink should be written similar to this: <a href="https://www.ivars.com/acres" target="_self">Iver's Acres of Clams</a>
This will render as: Iver’s Acres of Clams.

Third, describe the link in a way that makes sense without context of a surrounded sentence. Remember that a screen reader will read the hyperlink out of context before it reads it in context of the sentence. Let’s take some examples:

Examples of bad hyperlink wording

• Find out why not to use click here here.
• Read more about read more here.

Examples of good hyperlink wording

• Why not to use click here in links.
• Read more links are bad: why?

For those with low vision or other visual stimulus needs, links must:

• Be a different, contrasting color that differentiates them from the text around them.
• Include a text decoration such as an underline or dotted underline that sets them apart from other text.
• May include different styles for different states, such as hover and clicked.

Your hyperlinks must also be navigable by keyboard and by screen reader. This is a global setting, and is usually done for you. Check that you can use the tab key to navigate to each of your hyperlinks.

← Return to Accessibility