Writing useful and accessible link text for websites

Hypertext links (usually referred to just as 'links') are one of the most basic elements of HyperText Markup Language (HTML). Ensuring hypertext links are accessible is a fundamental aspect of web accessibility.

Well written link text plays an important part in helping users navigate your content and perform tasks. If links are clear and accessible it helps build trust between you and your users and gives them confidence in your content. All editors working on the University of Dundee website should follow this guidance.

What is a link?

You might be familiar with a link as a simple underlined bit of text you see on a page. While this is the most common usage, links are used in other ways too.

Navigation

The navigation at the top of most websites is a group of links. These links might be styled to look different from a standard link, but they will work in the same way.

A visitor with a disability or impairment will rely heavily on navigation being easy to discover, understand, and use.

Breadcrumbs

Many websites use ‘breadcrumb’ links to help visitors understand where they currently are and where they have been. Breadcrumbs provide a link back to the homepage and any ‘parent’ pages that sit a level above the current page.

When a website has a lot of pages, breadcrumbs help visitors, including those with additional access needs, find their current location within the hierarchy.

Skip links

Skip links allow visitors to jump over (or skip) chunks of your web page. Some visitors, such as those who rely on a screen reader, want to skip past the navigation to read the content.

A ‘Skip to content’ link means visitors don’t need to cycle through all the individual links in a navigation menu. A screen reader will read each link individually, which can be time-consuming and irritating without a skip link.

A ‘Skip to navigation’ link will direct visitors straight to the navigation, past any branding or other content that sits before the navigation on a page. This can help people who navigate using only a keyboard or an assistive device find the right page in your navigation.

How do people use links?

When creating links, we need to think about all the different ways our visitors might interact with them. Not every visitor will be using a desktop computer or a laptop with a mouse or trackpad to click the links in your content.

Keyboard navigation (tabbing)

Not everyone can use a mouse to click on a link. Our visitors must be able to navigate to and select each link using the keyboard alone. In most browsers, the Tab key allows users to jump from link to link, and the Enter key allows users to select a link. If the only way to access a link is with a mouse, the link is unusable for people who cannot use a mouse.

In the past, website developers defined access keys for links so visitors could use a keyboard shortcut to focus on an individual link. For example, a developer might use Alt + H as the access key for a 'Home' link in their navigation. However, this approach is now considered bad practice. Visitors will often have their own predefined shortcuts and will not expect a website to have programmed custom shortcuts for them. It also creates an additional requirement for you to provide an explanation of your access keys.

Screen readers

A screen reader enables blind or visually impaired people to use their computers to access our website and consume our content. It's a form of assistive technology that renders text and image content as speech or braille output. 

Visitors who use a screen reader to access our content can't see the links on our page. Instead, they rely on their screen reader to read the link text aloud to them. They rely on us to create link text that makes sense.

Screen reader users will typically skip through content from one interactive element (links and buttons) to another or skip through content using headings and links.

Most screen readers say "link" before each link. So, for example, a "research themes" link would be read as "link research themes" by the JAWS screen reader for Windows.

Tapping

The majority of our visitors now use a mobile device. They tap their finger on a link to interact with it and reach the destination page. 

Links must be distinctive enough to be visible on small mobile screens, especially when visitors are outside in direct sunlight, which can adversely affect their experience. Links must stand out from other content too. 

Links that are too short are more difficult to spot when scanning through a page, especially on smaller screens. Likewise, links that are too long take more time to read and understand; they can span across two or three lines on mobile devices, which is not ideal.

Make links descriptive and meaningful

Remember that people are very unlikely to read all of the content on a page, they are more likely to scan it. Links should be descriptive enough to work in isolation from the rest of the content.

Link text should make the destination of the link clear. If you are linking to information then you could consider using the page title of the destination page if it is suitably descriptive.

For links that lead to action (for example, registering for a service) you should start the link text with a verb and encourage the user to take the next step.

Never use 'click here' or 'more' as link text

• It forces the user to read the surrounding text to understand what the text is linking to and makes the content difficult to scan.
• It makes the content inaccessible for screen readers if they request only the links on the page.
• It assumes every user is using a mouse.

Write consistent link text

Don’t use the same link text to link to different destinations as it will confuse users.

Link length

Avoid using links that are only a single word. These are generally not descriptive enough to be useful and can be difficult to select for users with reduced motor skills. 

Avoid using URLs as link text

You should avoid using URL text as this is often long, contain special characters, and are not screen reader friendly. It’s better to use human-readable text instead of a URL.

Position links where it helps the reader

If possible, avoid adding mid-sentence links, this makes it difficult for users to scan your content and may also cause readability issues for autistic users.

Keep in mind that users might scan a paragraph or not read it all so help them get to the actionable part of the content as quickly as possible. You can do this by positioning links at the end of a sentence or below a paragraph that relates to the link.

Use sentence case for link text

Like headings you should use sentence case for links. Studies show that lowercase words are easier to scan so it makes sense to use it for link text if a user is looking for the actionable content on a page.

The exception to this is if the link text contains a proper noun. Examples of a proper noun could be a person, University building, course, or department.

Don't overload your content with links

The more links that you add to a web page, the less readable it becomes - especially if links are mid-sentence. Multiple links compete for a user's attention, slow reading progress and increase cognitive load.

Remember the purpose of the content and the task the user is looking to perform. If there are multiple tasks (and links) associated with it then it might be better split into separate pages.

Colour and design

A link should be distinct from its surrounding content. This can be achieved using at least two different design techniques:

• A heavier font weight (compared to the main body text)
• A distinctive colour that contrasts well with the background colour (a 4.5:1 contrast) and the surrounding text (a 3:1 contrast)
• An underline or border

Links have multiple 'states'. A link's state changes depending on how someone interacts with it. For example, if you place your mouse cursor over a link, it will change from its 'default state' to its 'hover state'. A link should be designed to have a distinctive appearance for each possible state.

• Default: The default state of a link should use at least two of the techniques mentioned above. The most common identifier for a default state is an underline.
• Hover: Hovering over a link will typically remove its underline and change its colour. Not every visitor will see this state, including those using mobile devices.
• Visited: This state identifies when a visitor has previously been to the hyperlinked page. Purple is the default colour for a visited state, but not every website adheres to this convention. Not every visitor will see this state, including those with visual impairments.
• Active: This state refers to when a link is clicked, tapped, pressed, or otherwise activated. This state must be distinct from other states using a change of colour or decoration (like removing the underline or border).
• Focus: This state should inform the visitor they are currently focused on the link. The default style for links in a focus state is a blue or black outline around the link. For people browsing using their keyboard or another assistive device, they can quickly identify where they are on a page. They will also know that the link is ready to press or activate.

External links

An external link takes a visitor to another website, unlike an internal link, which takes them to another page within the current website. Distinguishing an external link from an internal link can be a helpful technique for all visitors, especially those who have cognitive impairments or are using a screen reader.

Some visitors find that being taken to a different website unexpectedly can be a jarring and unpleasant experience.

Link target

Link target refers to whether your link opens in the current tab or window or opens a new tab or window. In nearly all situations, you should avoid setting your link to open a new window or tab.

This is because people using assistive technology could be frustrated by a surprise window popping up. If opening a new window or tab is unavoidable, add a warning in the name or label for the link. For example, ‘W3 guidelines on link accessibility (opens a new window)’. You can also provide an icon next to the link text for those visitors who can see it.