Accessible Links

On This Page

Introduction

Links, also known as hyperlinks, are a fundamental element in HTML. They connect different pages, or parts of pages, to one another.

In HTML, links are created using the anchor element <a>. This element allows you to make text or images clickable, and has inbuilt interactivity allowing users to activate the link with a mouse click, a touch device or by pressing Enter on a keyboard. It is also automatically reachable with the tab key.

The accessible name for links created using the anchor element comes from the content between the opening and closing tag. If the content between the opening and closing tags is not text, or the text is very generic the accessible name should be added in another way, for example with ARIA.

An important attribute for accessibility is the href attribute. This specifies the destination of the link. If the href is not present then the link is not accessible.

Accessible Link Names

Descriptive Link Text

Link text is the text between the opening and closing anchor tag that describes a hyperlink on a webpage. It's important to have descriptive link text to provide clear context about where the link leads and helps users understand the purpose of the link. This is helpful for people with cognitive disabilities, screen reader users and voice input users.

html

<a href="https://accessibleweb.dev">Visit Accessible Web Dev</a> 
<!--The descriptive name in this case is "Visit Accessible Web Dev" -->

Non-descriptive Link Text

If possible, avoid using vague, non-descriptive phrases as link text such as "Click Here" or "Read More". These phrases are difficult to understand without surrounding context and can pose problems for screen reader users and voice input users. It is also common to see these phrases repeated multiple times on a page, for example on an e-commerce site listing several product cards, making it more difficult to differentiate between the different link destinations.

If you must use non-descriptive text, you can make it more accessible by using methods to overwrite the visible text. Two such methods are using aria-label or hiding additional text with CSS.

Aria-label

The first method is to use an aria-label. This will overwrite the visible text and be read out to screen reader users instead. It's important to keep in mind that the aria-label should start with the same text as shown in the visible text so that the link still works for voice input users. If the visible link says "Read more" the aria-label might be "Read more about accessible buttons"

An aria-label can also be used to give an image or icon link an accessible name when there is no visible link text.

html

<a href="https://accessibleweb.dev/buttons" aria-label="Read more about accessible buttons">Read more</a>

Some downsides to aria-label are that it doesn't always get translated by in-browser translation tools. It also completely overwrites the visible text which can be problematic if the two do not match.

Hiding elements with CSS

Another solution is to use CSS to hide some extra text. This can be done by adding a visibly hidden <span> element within the <a> element to provide descriptive text that gets read out to screen readers but is not visible to sighted users.

html

<a href="https://accessibleweb.dev/buttons">Read more
	<span class="visibly-hidden">about accessible buttons</span>
</a>

css

.visibly-hidden {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* You may also see this class called screen-reader-only or sr-only in
other places on the web */

Link State and Style

To improve the accessibility of your website, it's crucial to make links easy to distinguish from non-interactive elements on a page.

Here's how to achieve this:

Underline links by default: Links should be underlined by default. This provides a clear visual indicator that a piece of text or an element is clickable. It's a universal convention that helps all users understand what's clickable.
Focus state: A focused link should have a focus indicator which makes it easy to see where focus is on the screen. This is often a thicker border or outline around the link and should have a contrast ratio of at least 3:1 with the background.
Ensure sufficient color contrast: Make sure the color of your links contrasts well with the background color or surrounding text color. This ensures that people with visual impairments or color vision deficiencies can easily distinguish the links from the surrounding text. The contrast ratio should be at least 4.5:1 for WCAG level AA compliance. Color should not be the only way to distinguish links from surrounding text.
Don't rely on hover state to convey links: Hover is not available on touch devices or for people navigating the web with keyboard, screen readers or other input devices. Therefore hover states only, such as underline or color change on hover, should not be relied upon to convey that something is a link.

Image and Icon Links

You can turn an image or icon into a clickable link that takes you to another webpage. Since image and icon links don't have a visible link text, you need to use a different method to give the link an accessible name. These methods can include adding an aria-label, using a visibly-hidden class or adding an alt attribute to the image text wrapped inside the link.

The important thing to remember when using images and icons as links is to describe the link destination rather than the content of the image.

html

<a href="https://google.com" aria-label="Google">
	<FaGoogle />
</a>

<a href="https://google.com">
	<FaGoogle />
	<span class="visibly-hidden">Google</span>
</a>

<a href="https://google.com">
	<img src="url" alt="Google" />
</a>

WCAG Criteria

Other Resources

Page last updated: 5th January 2024