Write Clear Link Text

Transcript

Links are the core way to navigate between webpages, but creating link text which is understandable can be a challenge. Unless the link text is well written it can be very easy or very hard for a user navigating audibly to understand where the link takes them.

In this lecture I'll walk through what constitutes good link text. I'll explain why clear link text is a necessity for web pages, describe the problem with poor link text and show several examples of good link text.

By the end of this lecture you'll be able to understand the benefits of clear link text, how to spot poor link text by using the reading aloud technique and ensure all links you add have text which is clear and understandable when read individually.

Some users navigate a website via a screen reader which audibly announces the text and labels of links and other interactive elements on the page when tabbing through with the keyboard. When a link has focus the link text is announced, but unless created clearly this text can be difficult to understand.

When a user navigates a page visually, they can easily understand the relationship between non-link text and the link. The text surrounding a link often provides additional context for where the link goes.

Link text asking the user to click here for today's fashion trends is easy to understand if the user can visually identify the proceeding non-link text "for todays fashion trends", the relationship has been established visually that the link labelled "click here", will take the user to information about today's fashion trends.

But a screen reader user doesn’t necessarily have the same ability to gather visual hints or the proximity of other text. The user may be unable to hear any of the other non-link text and they're instead relying solely on the link text to provide sufficient information where the link goes. If a link is labelled unclearly as in the case of the link text "click here" it becomes difficult to understand the destination of the link.

Overcoming unclear link text has a straightforward solution. use clear link text! Seriously it's that simple. Screen reader users navigate via page links, so it's vital to provide link text which is understandable when read on its own. But what constitutes clear link text? Its text which is understandable when read on its own away from of any other non-link text or paragraph content.

In the previous example, the fashion link would be unclear link text, when read on its own the text "click here" is unclear, what is it referring to, where does the link go? Attempting to understand the link destination solely from the text its impossible.

Instead replace the unclear link text and make the whole text a link "click here for todays fashion trends", instantly an understandable link has been provided which makes sense when read on its own. When the link is read individually the destination of the link is described, a screen reader user can understand that this link will navigate to content about today's weather. This can be taken a step further and unnecessary words be reduced to create truly succinct link text. A link by its very nature is clickable and navigates users to content, several screen readers will identify a link and add the word clickable to its audible description. Therefor an option could be to remove click here (as that’s unnecessary as that’s what a link does) and instead have "todays fashion trends" using only the words necessary to describe the destination, wherever possible get into the practice of using short and succinct link text.

Aside from reducing audible clutter of unnecessary words, links which begin click here are difficult to navigate using a feature of screen readers called the links or elements list. This is a window which lists all links on a page separately within the screen reader software. It’s a way for users to quickly navigate to a link on the page without having to navigate through all onscreen content. All of the page links are listed alphabetically, if several links begin "click here" a user has to listen to each link in full to determine if it’s a link they want to activate by hearing the last unique part of the link text.

A way to determine if link text is clear is by reading it aloud. Hearing link text spoken is a great way to determine if the text is understandable on its own, if you described a link to a colleague or friend using just the link text could they understand it? If not, then it’s probably a good indicator that the link is difficult to understand.

Using clear link text satisfies the HTML specific technique H30 Providing link text that describes the purpose of a link for anchor elements which means this has passed Success Criterion 2.4.8 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general (level AAA).

I chose to use a WCAG 2.1 AAA technique as it presents a better user experience for the end user, to pass at AA level all that is required is to provide is non link text which provides clarification for the link itself, there may be several read more links but because the preceding or proceeding text provides context this is classed as a pass. In our opinion this is a poor end user experience and always suggest you aim for the AAA success criteria in this instance.

I explained how unclear link text can make it difficult for screen reader users navigating a website in a non-visual way. The simple approach to this is to use clear link text, and the best way to determine if the link text chosen is clear is by reading aloud any text. If it makes sense when read outside of the accompanying webpage then this is a good indication the link text is clear and understandable.

This video is from our Introduction to Web Accessibility WCAG 2.1 Udemy course. The course is designed to teach you the fundamentals of web accessibility and how to apply those techniques to websites that you create. If you're interested in finding out a little more, checkout the link in the description below as well as links to a full transcript.

If you want to stay up to date with web accessibility and to learn cutting edge techniques, consider subscribing and click the bell icon to be notified when new videos are uploaded.