Links

---

• How Screen Readers Interpret VS. How You May Interpret
• How to Properly Format Hyperlinks
• Which Examples Are More Helpful?
• How to Format Links
• Creating a Descriptive Link Text
• Linking to a Page or Resource in Your Course
• Additional Resources

Screen readers automatically recognize links. You don't have to create an HTML tag or write "link" before a link, for example:

• You may interpret this sentence as: Please read the link How to Format. 
• A screen-reader will interpret the same sentence as: Please read the link link How to Format.

A screen-reader will read the object type (whether it is an image, a link, a header two, etc.) and then interpret the text or object. Watch this video to see how screen readers interpret links:

The key to usability, then, is in the actual text of the hyperlink. Here are the rules to follow:

• Identify the purpose or function of the hyperlink as part of the hyperlink name.
• Be as descriptive as possible without being overly long - the user will have to listen to the whole link before moving to the next link on the list.
• Integrate the link into your sentence - sighted users will see the link, and screen readers will identify the link.

There are also a few things you should avoid. Just as "Read More" is not helpful, neither is "Click Here." Also, in keeping with the idea of being descriptive, links should not be URLs. Not only are most URLs not descriptive, but they are also usually very long.

Watch CVC-@ONE's Byte-Sized Canvas clip to learn more about the different types of links in Canvas, how to correctly link to external sites, and correctly format links. 

The ability to create hyperlinks is a terrific asset to online learning. Properly formatted hyperlinks can help your users scan for relevant information, identify outside resources, and recognize when they should select this text to access the resources. 

For sighted users, there are two crucial design standards that help the user identify a hyperlink - they are blue and underlined. The color stands out from the rest of the text, allowing readers to scan and then select the link. It's a rich visual cue. 

Redundant Links

While this is one of the simplest methods to direct individuals to other Web pages and documents, hyperlinks can also have potential accessibility challenges. Many of these problems stem from unfamiliarity with screen reading software, but some also have to do with thinking through how your students will use the information you're providing. Here are the common errors:

There are two important functions a screen reader can perform that influence the text you should use to denote a link. First, when a screen reader comes to a link within a block of text - a paragraph, for instance - it announces to the user that it "sees" a link. It then reads the text of the link.

Listen to the screen reader in this video:

Since the screen reader identifies the hyperlink and states "link," you should avoid using "link" or "link to" in your hyperlink.

Ambiguous Link Text

The other handy function screen readers provide is the ability to scan a page and create a "Links List." Screen readers can replicate scanning for links by using a feature that collects all the hyperlinks on a Web page and presents this hyperlink list to the user. This allows the user to listen to a list of hyperlinks that are available on the page and navigate directly to the desired hyperlink as opposed to being forced to listen to the entire page, line-by-line. In JAWS, the list of links will look something like this:

The Links List can be extremely helpful, but only if the link text is descriptive. However, hyperlinks may be named in such a way that either the purpose or destination of the link is unclear. For example, oftentimes news sites include a teaser to a full news article followed by the hyperlink text "Read More" for the rest of the article. Sighted users can easily see to which article the "Read more" link refers. A user listening to the Links List, however, has a two-fold problem.

First, "Read More" does not provide any context that will allow the user to understand the link better. Second, this problem is magnified when there are multiple "Read More" hyperlinks on a page. 

If you are linking to a resource outside your course, the link should open in a new window, allowing your students to view the new resource, but still, have access to your course. For students who rely on screen readers, it is much easier to toggle between an external site and your course in the form of multiple windows. 

First, highlight the descriptive phrase.

Then on the keyboard, use Control + K to open the "Insert Link" window.

1. Type your URL.
2. Text to display: this is what your students will read. 
3. Title: write a short description to help students who require screen readers understand why this link is important. "Title" is typically for providing additional information.
4. Target: select New Window.

If possible, it is recommended to keep students within your course by copying content from the external site, placing it in a content page, and citing the original source. By doing this, you can easily manage the accessibility of the content and always have access to the content. Sometimes external sites may disappear or have broken links. 

 

Linking to Files

Finally, there is one more hyperlink strategy that is good for all of your users. For hyperlinks that take a user to different file types (e.g., QuickTime movie, PDF, Word document), it can be helpful to include the file type in the name of the hyperlink itself. This can be as simple as appending the file type to the end of the hyperlink name. For non-HTML based documents, you could also include the approximate file size. This is not specifically an accessibility issue but allows the user to determine how large the file will be and whether or not the connection speed will support such a file size. Here are some examples of including the name and file information in a hyperlink:

• Adobe Acrobat Datasheet [PDF, 500K]
• Course Syllabus [PDF]
• Letter of Introduction [MS Word]
• View Memorial Service [Quicktime MOV]

1. In the Rich Content Editor, select the text that will become the link.
2. From the right-hand editing menu, select the resource, activity, or assignment to which you would like to link.

There's an added benefit to creating a link to a resource or page in your course this way. Using this method creates a "Relative Link," which means the link automatically updates when you copy your course in future sessions.  

WebAim: Links and Hypertext  Links to an external site.

Why External Links Should Open in a New Tab Links to an external site.

How do I insert links to course content using the Content Selector? Links to an external site.

How do I create a hyperlink or embed a file from Google Drive? Links to an external site.