Hyperlinks

Hello and welcome to module 2 of our accessibility training. This video focuses on understanding how to properly use hyperlinks, learning how to write accessible paragraphs and good headings, and how to write proper page headings.

To start, we will discuss three aspects of hyperlinks: empty links, URLs, and anchor text. We will also discuss the importance of properly using these three hyperlink aspects.

An empty hyperlink is a link with no text. It is invisible to people viewing the page, so you should not have empty links on your web page. Since empty links are invisible on the front end, you can request a scan for empty links from Web Services, and we can help you pinpoint their exact location.

A URL, also known as a hyperlink, is a full link address, which can be viewed in the search bar.

Often, it can be easy to skip over the text of a URL. Screen readers may read the entire URL out letter by letter, which is unnecessary and extremely inconvenient for users. The URL usually does not describe the link destination, so, as a result, it can introduce unnecessary ambiguity over where the link leads.

Therefore, we recommend inserting hyperlinks with anchor text, instead of copying the full URL.

Although you may not be familiar with the term “anchor text”, you have probably encountered anchor text before.

Anchor text is the text that appears instead of the full URL. The text is often blue and underlined, or, on our Carleton-themed websites, it is red and bolded.

Anchor text helps people who use screen readers navigate where they are going and what they are clicking when they click the anchor text.

While anchor text is an improvement over a plain URL, there are ways to improve your anchor text as well.

The general rule of thumb is to use descriptive keywords in your anchor text to indicate where clicking the link will lead.

Occasionally, you might see links with text that read Click here. This is an example of bad anchor text. Without the surrounding context, the anchor text is essentially meaningless. Users would need to either click the link and find out where it leads or search the surrounding text for clues to know what they are clicking on. Overall, this anchor text provides no context for the user reading it.

Besides being inconvenient to all users, anchor text like this can also raise significant accessibility issues. While it might be easy for one user to open the link and quickly check where it leads, another might lose track of where they were on the previous page, be unable to quickly scan the linked page, or else have difficulty navigating back to the previous page.

A better version of the click here anchor text is to expand on what this action will result in. For example, “Click here to view our tutorial on using hyperlinks properly.” This anchor text provides context as to where the link will lead users when they click on it.

Here are some additional examples of good anchor text:

• “Register for our event”: linking to a registration page/form
• “Visit this page to apply”: linking to a page/form to apply
• “Learn more about ____blank topic”: linking to a page, post, etc. with more information
• “Buy a copy of this book”: linking to a page to buy a copy of the book

In this module, you learned the difference and the importance of three aspects of a hyperlink: empty links, URLs, and anchor text. You also learned the difference between good and bad anchor text and how to properly include hyperlinks in your content.