hyperlink header

Hyperlinks – Creating Accessible Content

Let’s briefly chat about “Hyperlinks”. As you know, “Hyperlinks” are links from a hypertext file or document to another location or file. Linked information is typically presented in the form of text, websites, files, or video content. Accessible hyperlinks can be easily created. There are a few simple concepts to keep in mind as you link and name hyperlinks within the resources you provide to students.

Look of the hyperlink

Provide concise and easy-to-read hyperlinks.

  • Hyperlink text should be underlined and colored differently from the surrounding text.*
  • If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. The alt text should not describe the image. Treat image links as links, not as images.
  • Link sizes should be generous. Large link sizes make it easier for users with low coordination or on mobile devices to activate links. Links should be at least 44px wide and 22px tall. 

*According to WCAG 2.0 accessible links means that the link text must have a 3:1 contrast ratio from the surrounding non-link text.  The link must present a “non-color designator” (typically the introduction of the underline) on both mouse hover and keyboard focus.

Substance of the hyperlink

Hyperlink text that clearly explains the content within the resource being hyperlinked.

  • Hyperlink text should not include the entire URL (except for resources likely to be printed, like a Word document) Screen readers will read each character (w-w-w-dot-h-t-t-p-colon…).
  • If the hyperlink leads to a file download, the text or image should mention this.
  • For web content, if the hyperlinked resource will open in a new tab (or window) of the browser, the text or image should mention this.
  • Do not use the words “Click Here”, “Read More”, “Find It, or any other “common” phrase for link text.  They conceptually tell the user nothing about the content of the link.
  • Do not link to two different URLs using the same words on the same page.
  • Do not link to the same URL using different words on the same page. 
  • Do not link to whole paragraphs or sentences.

NCSU Accessibility in the Classroom – Hyperlinks

CSU, Fullerton – Accessible Technology Initiative

Yale – Usability and Web Accessibility

Accessible Link Examples

Meredith Lacrosse Sets Pace in Win Against WPU. To read the full article, please see the Women’s Lacrosse page. (opens in a new window)

From low-tech to high-tech the IDAT team is here to help faculty and staff find solutions through training and consultations in support of instruction and office productivity. Please check out the Instructional Design & Academic Technology blog. (opens in a new window)

Discover more from Instructional Design That Works

Subscribe now to keep reading and get access to the full archive.

Continue reading