Loyola University Maryland

Accessibility at Loyola

Hyperlinks

Learning to write good hyperlink text can improve all forms of communication from email, to websites, to course materials. Hyperlinks should be clear and concise. A user should never have to click a link to know what the material on the other side of the link is about.  

Accessible Hyperlinks 

By embedding links into text you will improve both the usability and accessibility of your materials, if you make them clear, concise, and meaningful out of context. Sighted users visually scan pages for links to help them find what they're looking for. People using screen readers can do the same thing: At the touch of a button, they can pull up a list of all the links on a page. As you learn more about links on this page, think about links that would be most useful to you in a list like that.

Embed the Link 

You should embed the hyperlink within the text. Do not simply cut and paste a URL into the body of a text.

Example of what not to do: Read more about hyperlink best practices at http://webaim.org/techniques/hypertext/link_text.

Example of what to do: Read more about hyperlink best practices

To make a hyperlink, highlight the text that you want to make into a hyperlink and insert the link. In many applications, the shortcut for creating hyperlink from text is simply control and K (or command and K on a Mac).

Be Concise 

Help your readers scan the hyperlink quickly to determine whether they want to click through and read it. Benefits of yoga is better than, "This page lists ways that yoga can improve your balance, muscle tone, strength, and heart health." The longer a link is the more likely it is to break across lines on the webpage or document, making it look like two hyperlinks. Plus, the longer link “gives away” some of the information your reader will find when they click through to your link. This may or may not be your intention. 

Adapted from https://accessibility.umn.edu/core-skills/hyperlinks

Be Descriptive

You will improve the experience of all your readers when you take care to create embed text that clearly explains what information your readers will find when they click on a hyperlink. Musings on veganism is more descriptive than musings. Never make users click a link just to find out where it goes!

Screen Reader Examples

Compare the bad example to the good example below by reading the blue underlined text as a screen reader would.

Bad Example:

"There are several things to consider in creating accessible link text. Learn more.

Click here to learn the difference between accessible, usable, and universal design

The article, "The Veil of Ignorance", challenges readers to imagine awakening in a new reality in which they are no longer the person they were with a potentially new social/economic status, gender, ethnicity, appearance, disability or combination. How would this impact the readers approach to design, from building and devices to the Internet? http://mrmrs.io/writing/2016/03/23/the-veil-of-ignorance"

Now imagine an audio file that reads the hyperlinks in this paragraph:

"There are several things to consider in creating accessible link text.

Learn the difference between accessible, usable, and universal design.

The article, "The Veil of Ignorance", challenges readers to imagine awakening in a new reality in which they are no longer the person they were with a potentially new social/economic status, gender, ethnicity, appearance, disability or combination. How would this impact the readers approach to design, from building and devices to the Internet?"

Which links are more clear? Which ones provide you enough context such that if the only information you had was the links, you could make an informed decision about which one(s) you wanted to use?

Email Examples

Now let's look at this email, paying particular attention to how the author created the hyperlinks. What do you notice? How would you improve it?

Email example without embedded hyperlinks

Next, take a look at the makeover of this email message. The text is all the same except the hyperlinks have been embedded in descriptive text. Note how much more concise, informative, and easy to read this revised message is:

Email example with embedded hyperlinks