Making Links Accessible1

The ability to link to (or jump) from place to place in a document or on the web is a great way to associate concepts and ideas in learning materials.  Just as with other pieces of content, links must have the capability to be seen and heard by learners.

universal icon for screen readers
Screen Readers and Links

Learners who are blind or have low vision use screen readers to access electronic documents and the Internet.

Reading the Link Text

Most screen readers say "link" before each link. For example, a "products" link would be read as "link products" by JAWS.

Implication:
Links do not need to include the word "link" in the link text, because all users already know that the link is a link.

Using Link Text to Navigate

Screen reader users often navigate from link to link, skipping the text in between.

Tabbing from link to link is a way of skimming web content, especially if users are trying to find a particular section of a web site.

Implication 1:
Links should make sense out of context. Phrases such as "click here," "more," "click for details," and so on are ambiguous when read out of context. At the same time, it would be overkill to ensure that every detail about a link destination is discernible by listening to the link context. Users wouldn't want to hear "Products page on which a list of all of our products are presented, including software products and training products, with a list of prices and availability by region." Perhaps a better alternative would be a link that simply says "Products."

Implication 2:
Place the distinguishing information of links at the beginning of a link. Don't put extra information first, For example, don't say "Link opens in a new window: Products." Instead, say "Products (opens in a new window)." 

Listen to a Screen Reader

The following video (3:29) demonstrates various ways a person using a screen reader can skim web content using the link text.

Link Phrases

""
Links are more useful when they make sense out of context.  Here are some general guidelines when determining what text should be used for links:
  • Link text should be descriptive and concise.
    • the link needs to be long enough to convey the purpose of the link and no longer
    • do not use entire sentences for links
  • It should be possible to understand the purpose of a link from the link text alone.
  • Avoid using non-informative link phrases such as:
    • click here
    • here
    • read more
    • link to …
  • Links leading to same destination should have the same description.
  • Links leading to different pages should not be described with the same text.2
Which would be better link text?  Think how it would sound if the link text was read to you.
(links in the example are not active)
 

a.    Click here for a printable version of the syllabus.

b.    Read the course syllabus (pdf).

Option b is the better choice.  The link text begins with the important content information (course syllabus) and includes information that the link is going to a pdf file.

URLs or File Names as Link Text

URLs and file names are not always human-readable or screen-reader friendly. Many URLs or names of files contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person.
  • In most cases, it is preferable to use human-readable text instead of a URL or file name.
  • If the URL or file name is necessary information, use descriptive text for the actual link and place the URL/file name, unlinked, in parenthesis. (links in the following examples are not active links)
    • First read the course syllabus (spring2010.docx).
    • Go to the textbook company web site (www.textbook.com).

Link Appearance

Links should look like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.

By default, links are underlined text.  Do not underline text for any other reason.


1 Information on this page, unless otherwise cited, is adapted from: "Links and Hypertext." Web AIM: web accessibility in mind. WebAIM. 1 Oct 2013. Web. 13 Nov 2014. <http://webaim.org/techniques/hypertext/>.
2   Mlynarczyk, Gosia. "A few tips on accessible links." YouTube. Nomensa. 27 Nov 2013. Web. 13 Nov 2014. <http://youtu.be/HceSej_z8Ik>.

"Screen Reader" Image from: http://rimblogs.files.wordpress.com/2012/05/screen-reader-1.jpg
"Click here" image from: https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQxty5oeVTz7mwSvogLnDlRKFTWovFKHzWfeZs7LXCwsGTnkONSJQ

Next: Making Word Documents Accessible