9 Tips for Creating Accessible Hyperlinks

Published in

Design Domination

8 min readJun 14, 2023

Accessibility of Hyperlinks

A hyperlink is not accessible just because it’s clickable with a mouse. Not everyone can use a mouse, such as people with a motor disability or someone with a broken wrist.

Also, mouse users are sighted people. Individuals with low vision or blindness may use a screen reader or other type of assistive technology instead of a mouse.

When hyperlinks are inaccessible to them, it ranges from being an inconvenience to a barrier, meaning it makes it more difficult for them to do something or prevents them from being able to do something.

There are functional, cognitive and visual factors to consider in order to have accessible hyperlinks.

Plus, what’s good for accessibility is good for all users. Accessible hyperlinks means everyone will be able to find them, understand them and activate them. There’s no guessing, and no guessing means better usability.

Here are 9 tips for creating accessible hyperlinks.

Hyperlink Accessibility Best Practices

#1. Use the right tag

The first is to use the right tag. Accessible hyperlink code involves the use of the a href tag. Simple as that.

Don’t send a span or div tag to try to do the job of an a href. Using the correct tag will make it clear to all users that something is a hyperlink.

#2. Use meaningful hyperlink text

The second tip is to use meaningful hyperlink text. That may sound obvious but this can be subjective or unclear to some people.

But it means to put the hyperlink on the word or phrase that conveys the context of the link — where the link will take someone.

An example would be: “Find out more about our design services.” with the hyperlink on the words “design services.”

Oftentimes, it’s instead put on words like “Find out more” and that may be unclear to someone with a visual disability. Find out more about what exactly?

It’s important to know that screen reader users can pull up a list of hyperlinks on a page, so that they can navigate a page faster than going through an entire page link by link. But how efficiently they’re able to do that is dependent on what is or is not in the link text.

“Find out more” may be unclear to them in that list of links.

#3. Don’t use “click here”

What you leave out of the hyperlink text is just as important too. So the third tip is to not use the dreaded “click here.”

First off, not everybody clicks. Some people are tapping.

But there’s no reason to include words such as “link” or “click here.” If the link is coded properly, someone using assistive technology will be informed it’s a hyperlink.

Someone using a screen reader, for instance, will hear the word “link” when they encounter one. Adding “click here” just makes it slower for them to find what they’re looking for because they will have to listen to that before they hear the rest of the words in the link, if there are any other words.

A web page could contain 50 different hyperlinks — in the navigation, main content, sidebar and footer. Imagine if there were 20 in the main content, and they all said “click here.”

This presents a few problems:

Someone using a screen reader has to hear “click here” before other link text, if it exists, before they know what that link is about. That slows them down from finding what they need.
Someone using a screen reader cannot tell what those hyperlinks go to, what they’re for. The link text isn’t meaningful, like my previous example.
Someone using a screen reader can’t tell if those hyperlinks all go to the same destination, if some are the same or if they are all different. Where will the links take them? Which one will get them to where they want to go?

#4. Don’t use color alone for styling

Tip #4 is don’t use color alone to style hyperlinks. I see a lot of designers doing this.

WCAG 1.4.1 Use of Color, states:

“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

The reason behind this guideline is to ensure that someone who has a form of color blindness, for example, can make out hyperlinks from other text. They may not be able to visually distinguish the hyperlink text from the body text because there isn’t enough differentiation between it and nearby text. So it may look just like regular, ol’ body text to them.

#5. Ensure sufficient contrast

That leads me to the next tip: Ensure that all hyperlink text has sufficient contrast with the background color.

The purpose for this is to make sure that someone with low vision, for example, can read the hyperlink text against the background.

If you’ve got black text and then make hyperlinks bright bold light blue, for example, that color doesn’t have sufficient contrast against a white background. This makes it hard for someone with a certain type of visual disability to read the text — that is, if they can even see the text at all.

#6. Test hyperlinks

Tip #6 is to test hyperlinks, but not by clicking with a mouse.

Keyboard testing of hyperlinks is vital. That’s because, as I mentioned, many people don’t use a mouse. If they use assistive technology, such as a screen reader, they usually use the keyboard along with it.

Hyperlinks should be able to be navigated by using only the Tab key on the keyboard. To go to a hyperlink, you should be able to use the Enter key on Windows or Return on Mac.

So hyperlinks should be completely navigable with only the keyboard and not having to use a mouse.

#7. Alert users to links that open in a new window or tab

Tip #7 is to alert all users to links that open in a new window or tab. The purpose of this is to avoid confusion, especially for screen reader users or individuals with a cognitive disability, who may not have noticed that the link opened in a new tab or window.

So either avoid opening links in a new tab or window, or if you want links to still open them in a new window or tab, just alert all users of it — not just sighted users. Typically, this is done with a combination of an icon for sighted users and some screen reader text for users of assistive technology.

It can be a very tedious process to do this though. So I recommend just installing Equalize Digital’s Accessibility Checker plugin (affiliate link). It will take care of all of that for you.

#8. Underline hyperlinks

Tip #8 is to underline hyperlinks. I can hear designers everywhere groaning.

I think part of why so many designers think that accessibility is ugly is because they think that they have to use electric blue hyperlink text and underlines. So they might use another color without any other styling to differentiate hyperlinks from other text.

Now, there is no specific guideline that requires that you underline hyperlinks. Some form of visual “underline” is best for accessibility and usability.

That’s because it has been the accepted convention since the first days of the web that anything that is underlined is a hyperlink.

Trying to get creative and do something outside the box just decreases usability and accessibility. Just because you can do something doesn’t mean you should.

It also makes things much more complicated than they need to be. You just create more work for yourself.

You already have to check the contrast of the hyperlink text to the background — period. Then you would also have to check the contrast of the hyperlink text to the surrounding text if you use color alone. Sometimes it can be hard to find a color that provides sufficient contrast in both places.

Then there’s the case of when you have different colored backgrounds on a page. You have to be careful of that as well. So it can make the CSS painful.

I bet underlines aren’t sounding so bad now.

But underlines don’t have to be boring, and they don’t have to use text-decoration: underline either. You can use border-bottom solid, dotted or dashed, for example, and get stylish.

If you style only hyperlink underlines with a different color, just be sure that that color needs to have sufficient contrast against the background. This is per the WCAG 1.4.11 Non-text Contrast requirement.

Now, I just ranted about the importance of using underlines for hyperlinks. But there is an exception to this rule. You see it on most websites but probably haven’t taken note of it.

That is that the hyperlinks in the navigation are not underlined. Those links don’t have to be underlined because it is understood that text in the navigation is hyperlinked.

#9. Don’t remove the focus state

Tip #9 is one of the most common mistakes that I see, and it’s one of the worst things you can do for accessibility.

So don’t remove the focus state! By that, I mean removing it with outline: 0; or outline: none.

I used to do this all the time in the past before I knew better. It used to be one of the first things I did when building a website because I didn’t like the look of it.

Little did I know back then, this removes the focus state of hyperlinks, which is vital for sighted keyboard users. Without it, they have no idea which link they’ve tabbed to on a web page.

So you can either do nothing with the focus state and let browsers handle it, or you can actually get creative and control the look of the focus state.

More About Accessible Websites

OK, so there you have them — 9 tips for creating accessible hyperlinks.

If you want to find out more about creating accessible websites, another important thing to focus on is image Alt-text. Images with no or poor Alt-text have been the subject of many accessibility lawsuits.

Download the free Alt-Text Made Easy Guide, where you’ll find out: