Ten Ways to Create Useful Hyperlinks

Including links in your eLearning content can makeit more valuable to learners by connecting them with additional articles,videos, infographics, and other multimedia content that enriches their learningexperience. But not all links are useful. A common problem in online content isbroken links. Other than periodically updating eLearning materials and checkingthe links, there’s not a lot you can do about links whose destinations are outsideyour website. But you can ensure that your working links are usable and useful toall members of your learning community. Simply follow these 10 tips:

1. Make “link anchor text” relevant. Linkanchor text is what appears on screen, coded with the hyperlink; it’s usuallyblue and underlined (more about that later). The anchor text should describe thelink’s destination or target. Don’t use generic labels like “click here” or“more information.” Descriptive text tells learners what they will find if theyclick the link: Read chapter 2. See the articleon social media. Find your registration dates on the academic calendar. Ifthe link triggers an action, like running a JavaScript function, tell learnerswhat will happen when they click it: Hidethis block of text. Change the size of the text on this page.
   Links have to make sense even when clicked out of context. Some people use thetab key to jump from link to link; others might be using screen readers orother assistive technology to access eLearning content. Relevant, descriptivelink anchor text ensures that learners know why they are clicking on—orskipping—each link.
2. Use descriptive text, not the URL, as theanchor text for the link. Some developers think that providingthe text of the URL as well as linking to the destination is helpful. But thatstring of code, known as a “naked link,” can confuse learners who are nottech-savvy. In addition, naked links are frustrating for learners who usescreen readers.
3. Emphasize link quality over quantity. Link only when the destination truly enhances your content. Use coursestructure and navigation to make it easy for people to return to previousmaterial and jump ahead, and don’t fill your text with superfluous links. Somewebsites have hundreds of links on a single page; these pages are very hard tonavigate for learners who do not use a mouse.
4. Don’t bother to add link titles. Title text doesn’t add anything if you have clear anchor text, and mostscreen readers skip title text. SEO (search engine optimization) looks atanchor text, not title text, so adding link titles doesn’t help your rankings.
5. Include alt text for linked images. In fact, it’s good design practice to include alt text (alternativetext) for all images that do not have descriptive captions. The alt textappears on a web page when the image fails to load or when learners have thebrowser set not to download images—for example, if they have slow Internet serviceor limited mobile data. Screen readers look at the alt text, not image titles,when reading a web page; if there is no alt text, the learner has no idea whatis in the image.
   If a link’s destination is an image, the alt text describes for the learnerwhat other learners are seeing.
   If the link itself is an image, a descriptive caption, included as part of thelink, can serve as the anchor text. If there is no caption, the alt text takesthe place of anchor text for learners using a screen reader or not downloadingimages. Alt text should not duplicate the caption text.

6. Make “mailto” and JavaScript links meaningful. For mailto links, include the name or title of the person who will getthe email. If that’s not possible, use text that gives a clear instruction: Email us for more information or Send us an email. When linking to aJavaScript function or other active elements, use meaningful anchor text, justas you would with a link to another web page. All links should have anchortext. Empty links are confusing to learners.
7. Keep link text short. While there is notechnical limit on link text length, links that are longer than a few words canmake the page visually confusing. Keep anchor text short and descriptive: Fill out an application. Benefitsinformation. Glossary. Links to documents, images, or videos should state that: Download application (PDF). Watch a demo video.
8. Links should look like links. In any browser,link text is colored and underlined. HTML sets default colors for active,visited, and unvisited links. You can use CSS (cascading style sheets) tochange the colors and appearance, but be careful. Learners expect underlinedtext to be links, and they expect links to be underlined. If you do change theappearance of links, be sure to use something in addition to color (typicallythe underlining) to indicate a link. This helps low-vision or colorblindlearners identify links.
9. Code visual effects correctly. If your visualdesign includes highlighting links with effects (such as drop shadows or colorchanges) that appear on hover or when the focus is on the link, include CSScodes for both hover and focus. This ensures that people tabbing through thepage can see the full effects.
   
10. Use“skip navigation” links for complex web pages. On many web pages, the top of the page containslogos, icons, links, search boxes, and lots of other “stuff” that is not actualeLearning content. Any user who does not use a mouse can really get bogged downin this, since it is hard to skip past using keyboard controls or a screenreader. Mouse-using learners scan the top content, then use the mouse to clickon a link or area of the screen they want to use. A “skip navigation” link letsall the other users do the same thing. It is simply a link at the top of thepage that jumps to a target at the beginning of the main content. If it’s in thetop left corner, the skip navigation link will be the first thing a keyboard tabwill jump to or a screen reader will mention. The skip navigation link can evenbe hidden so that mouse-using learners will never know it’s there, but hiddenlinks should appear when the keyboard focus is on them.