Links

Common Mistakes

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:

Screen Reader example Links to an external site.

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. 

How to format hyperlinks

Create Descriptive Link Text

Screen readers automatically recognize links--you don't have to create an HTML tag. The key, 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." In addition, 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.

Opening in a new window

If you need to link to an external site outside of your course, use "New Window." Another option to consider is whether you want the link to open in the current window, or whether you want the link to open in a new window. If you are linking to another page, activity, or assignment in your course, the link should open in the same window. 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. 

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]

How to Create a Hyperlink

Linking to a page or resource in your course

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.  

Linking to a resource outside the course

1. Copy the URL of the page to which you will link.
2. In the Rich Content Editor, select the text that will become the link.
3. On a PC, select Control+k. On a Mac, select Command+k. The Insert Link edit box will open.
4. Paste the URL into the URL edit field.
5. Check the text to display to be sure it is descriptive and accurate.
6. Choose "New Window" from the drop-down menu in the Target field.
7. Select OK.

Ctrl-K Dialog Box: