{"id":17791,"date":"2022-06-02T09:52:47","date_gmt":"2022-06-02T13:52:47","guid":{"rendered":"https:\/\/carleton.ca\/webworkshops\/?page_id=17791"},"modified":"2022-08-11T14:43:39","modified_gmt":"2022-08-11T18:43:39","slug":"hyperlinks","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-2-text\/hyperlinks\/","title":{"rendered":"Hyperlinks"},"content":{"rendered":"

Estimated time to complete: 10 minutes<\/p>\n

Module<\/h2>\n

In this module, we will discuss three aspects of hyperlinks: empty links, URLs, and anchor text. We will also discuss the importance behind using these aspects of hyperlinks.<\/p>\n

Empty links<\/h3>\n

An empty hyperlink is a link with no text. It is invisible to people viewing the page, which causes navigation on a page to be difficult for screen readers.<\/p>\n

You should not have empty links on your web page. To resolve this issue, remove the empty link or provide anchor text.<\/p>\n

As empty links are invisible on the front end, you can request a scan<\/a> for empty links from Web Services, and we can help you pinpoint their exact location.<\/p>\n

URLs<\/h3>\n

The URL is the full link address, which can be seen in the search bar. For example, this page’s URL is https:\/\/carleton.ca\/webworkshops\/accessibility-training\/module-2-text\/hyperlinks\/. While, visually, it’s pretty easy to skip over the text of a URL, screen readers may read the URL out, which is unnecessary and inconvenient for users. As well, the URL is often not very descriptive of the link destination, introducing unnecessary ambiguity over where the link leads.<\/p>\n

Therefore, instead of copying in the full URL, we recommend inserting hyperlinks with anchor text.<\/p>\n

Anchor text<\/h3>\n

Anchor text is text that appears instead of the full URL. It is often blue and underlined, or, on Carleton-themed websites, red and bolded.<\/p>\n

\n
\n
\n
\n

Though you may not be familiar with the term “anchor text”, it’s very likely that you’ve come across it before. In fact, the “request a scan” link under the Empty links header is an example of anchor text. The anchor text reads “request a scan” while clicking on the text redirects you to the URL https:\/\/itsjira.carleton.ca\/servicedesk\/customer\/portal\/5.<\/p>\n

Anchor text helps people who use screen readers know where they are going and what they are clicking when they click the anchor text.<\/p>\n

This is another example of anchor text leading to the homepage of the introduction to CMS training.<\/a><\/p>\n

Writing good anchor text<\/h3>\n

While anchor text is generally an improvement over just a plain URL, there are ways to improve your anchor text as well.<\/p>\n

The best rule of thumb with writing anchor text is to use descriptive keywords in your anchor text to indicate where clicking the link leads.<\/p>\n

Bad anchor text:<\/h4>\n

You may often see links with text that just read Click here<\/strong>. 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.<\/p>\n

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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Good anchor text:<\/h4>\n

A better version of the\u00a0click here<\/strong> anchor text is to expand on what this action will result in. For example,\u00a0Click here to view our tutorial on using hyperlinks properly<\/strong>.<\/p>\n

Some other examples of good anchor text:<\/p>\n

    \n
  • Register for our event<\/strong>: linking to a registration page\/form<\/li>\n
  • Visit this page to apply<\/strong>: linking to a page\/form to apply<\/li>\n
  • Learn more about (topic)<\/strong>: linking to a page, post, etc. with more information<\/li>\n
  • Buy a copy of this book<\/strong>: linking to a page to buy a copy of the book<\/li>\n<\/ul>\n

    Video<\/h2>\n