Best Practices for Hyperlinks Purpose of the Format Feature the Ability to Create Hyperlinks Is a Terrific Asset to Online Learning

Best Practices for Hyperlinks Purpose of The Format Feature The ability to create hyperlinks is a terrific asset to online learning. Properly formatted hyperlinks can help your users scan for important information, identify outside resources, and recognize when they should select this text to access the resources. For sighted users, there are two important 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. Common Mistakes 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: Redundant Link Text 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: https://www.youtube.com/watch?v=KFPtxCDUPqs&feature=youtu.be 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, often times 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 better understand the link. Second, this problem is magnified when there are multiple "Read More" hyperlinks on a page. The Links List will be, essentially, a long list of "Read Mores" How to format hyperlinks Descriptive Link Text Screenreaders 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, they are usually very long. Opening in a new window Another option to consider is whether you want to 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. 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: .

Load more