Hyperlinks

Estimated reading time: ( words)

Summary: Hypertext links are one of the most basic elements of any web-based experience. Learning to write good hyperlink text can improve your emails, web pages, course websites, and documents. 

 

On this page:

 

Accessible hyperlinks

You can improve both the usability and accessibility of hyperlinks by embedding them in text and making them clear, concise, and meaninful 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 other text. That is, instead of cutting and pasting the full text of a link, like this:

http://webaim.org/techniques/hypertext/link_text (no)

Highlight the text you want to make into a hyperlink, and insert the link. In many applications, the shortcut for creating a hyperlink from text is simply control and K (or command and K on a Mac). Your embedded hyperlink will look like this:

Hyperlinks best practices (yes)

In this way, your writing will be more succinct and easier to scan. You also have the opportunity to use the text to describe where the link leads. And, adaptive technologies users won’t have to listen while their screen reader reads every single character of a URL. 

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 link is more likely 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.

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 simply musings. Never make them have to click a link just to find out where it goes!

Screen reader examples

 

Put it all together

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:

Good example

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? 

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.

Did you find what you were looking for?