When designing a course, you will want to ensure that all students can access the websites and documents that you link. Accessible hyperlinks are particularly important for students with screen readers, who will hear links read 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 embedded in 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. If possible, indicate when links lead to non-HTML resources (such as PDFs, Word documents, slides, and videos) by including the file format in the hyperlinked text.
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 whatever text you link read out loud. Per WebAIM, “The link needs to be long enough to convey the purpose of the link and no longer” (Links and Hypertext, n.d.).
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, Frey, & McMorland, 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, see the Envison 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.