Hyperlink Dos and Don'ts

Hyperlinks on a computer screen.

When designing a course, you want to ensure that all students can access the websites and documents that you link to. Accessible hyperlinks are particularly important for students with screen readers, which read the links out loud. This piece contains best practices for writing and formatting accessible hyperlinks so that all learners can access the content that you have curated for your course.

Hyperlink Dos

Do be precise.

Many links are anchored within sentences. If you’re uncertain what portion of a sentence to link, ask yourself if the hyperlinked text communicates the destination if read in isolation. Additionally, we recommend indicating when links lead to resources other than webpages (such as PDFs, Word documents, slides, and videos) by including the file format in the hyperlinked text.

For example, if you are linking a supplementary PDF document for an assigned textbook chapter, you might use "Chapter 1 supplement [PDF]" as the anchor text for the file link.

Do be concise.

Communicate the purpose of the link as clearly and quickly as possible, keeping in mind that users with screen readers will have to listen to the text you link read out loud. Per WebAIM (n.d.), anchor text for links should be “long enough to convey the purpose of the link and no longer."

Do space links out.

Some users have difficulty making precise movements on a webpage and can get frustrated if there are multiple links close together. As a general rule, you should avoid back-to-back links that take the user to different pages. If you must include a list of links, consider adding extra spacing in between the lines.

Hyperlink Don'ts

Don't use vague words and phrases.

Avoid hyperlinking generic words and phrases such as “click here,” “link,” “read more,” “info,” or "download" (Kearns et al., 2013). As a general rule, it is good to give users enough information to decide whether they want to click on a link and navigate away from their current location. Using precise hyperlinks is also helpful for users with screen readers, which often remove links from their surrounding context and collect them in a list.

Don’t underline or color text for emphasis.

Web users associate colored (especially blue) underlined text with hyperlinks. To mitigate confusion, use bold or italics for emphasis, reserve underlined text for links, and, when possible, avoid colored text. This will make it less likely that users will mistake an emphasized phrase for a broken link. It's also a general accessibility best practice to avoid using color to convey meaning, which can create barriers for users with visual impairments. For more information, see the Envision piece Accessible Use of Color.

Don’t hyperlink URLs.

In addition to being aesthetically displeasing, linked URLs can create a frustrating experience for screen reader users, who have to listen to links read aloud. As an example, imagine a long, "ugly" Google link: a screen reader would read every individual number, letter, and character in that link. Whenever possible, especially with long links, avoid hyperlinking the URL and hyperlink descriptive text instead.

Don’t repeat links or descriptive text.

Only provide a hyperlink once on a page. Users can become confused if multiple links route them to the same external location. In the same vein, avoid using the same text to describe links to different locations: as an accessibility best practice, descriptive text should tell a user where a link leads, enabling them to distinguish between links on a page.

References

Kearns, L. R., Frey, B. A., & McMorland, G. (2013). Designing online courses for screen reader users. Journal of Asynchronous Learning Networks, 17(3), 73–86.

WebAIM. (n.d.). Links and hypertext.