Including links in your eLearning content can make it more valuable to learners by connecting them with additional articles, videos, infographics, and other multimedia content that enriches their learning experience. But not all links are useful. A common problem in online content is broken links. Other than periodically updating eLearning materials and checking the links, there’s not a lot you can do about links whose destinations are outside your website. But you can ensure that your working links are usable and useful to all members of your learning community. Simply follow these 10 tips:
- Make “link anchor text” relevant. Link
anchor text is what appears on screen, coded with the hyperlink; it’s usually
blue and underlined (more about that later). The anchor text should describe the
link’s destination or target. Don’t use generic labels like “click here” or
“more information.” Descriptive text tells learners what they will find if they
click the link: Read chapter 2. See the article
on social media. Find your registration dates on the academic calendar. If
the link triggers an action, like running a JavaScript function, tell learners
what will happen when they click it: Hide
this 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 the tab key to jump from link to link; others might be using screen readers or other assistive technology to access eLearning content. Relevant, descriptive link anchor text ensures that learners know why they are clicking on—or skipping—each link. - Use descriptive text, not the URL, as the anchor text for the link. Some developers think that providing the text of the URL as well as linking to the destination is helpful. But that string of code, known as a “naked link,” can confuse learners who are not tech-savvy. In addition, naked links are frustrating for learners who use screen readers.
- Emphasize link quality over quantity. Link only when the destination truly enhances your content. Use course structure and navigation to make it easy for people to return to previous material and jump ahead, and don’t fill your text with superfluous links. Some websites have hundreds of links on a single page; these pages are very hard to navigate for learners who do not use a mouse.
- Don’t bother to add link titles. Title text doesn’t add anything if you have clear anchor text, and most screen readers skip title text. SEO (search engine optimization) looks at anchor text, not title text, so adding link titles doesn’t help your rankings.
- Include alt text for linked images. In fact, it’s good design practice to include alt text (alternative
text) for all images that do not have descriptive captions. The alt text
appears on a web page when the image fails to load or when learners have the
browser set not to download images—for example, if they have slow Internet service
or 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 what
is in the image.
If a link’s destination is an image, the alt text describes for the learner what other learners are seeing.
If the link itself is an image, a descriptive caption, included as part of the link, can serve as the anchor text. If there is no caption, the alt text takes the place of anchor text for learners using a screen reader or not downloading images. Alt text should not duplicate the caption text.
- Make “mailto” and JavaScript links meaningful. For mailto links, include the name or title of the person who will get the 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 a JavaScript function or other active elements, use meaningful anchor text, just as you would with a link to another web page. All links should have anchor text. Empty links are confusing to learners.
- Keep link text short. While there is no technical limit on link text length, links that are longer than a few words can make the page visually confusing. Keep anchor text short and descriptive: Fill out an application. Benefits information. Glossary. Links to documents, images, or videos should state that: Download application (PDF). Watch a demo video.
- 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) to change the colors and appearance, but be careful. Learners expect underlined text to be links, and they expect links to be underlined. If you do change the appearance of links, be sure to use something in addition to color (typically the underlining) to indicate a link. This helps low-vision or colorblind learners identify links.
- Code visual effects correctly. If your visual
design includes highlighting links with effects (such as drop shadows or color
changes) that appear on hover or when the focus is on the link, include CSS
codes for both hover and focus. This ensures that people tabbing through the
page can see the full effects.
- Use “skip navigation” links for complex web pages. On many web pages, the top of the page contains logos, icons, links, search boxes, and lots of other “stuff” that is not actual eLearning content. Any user who does not use a mouse can really get bogged down in this, since it is hard to skip past using keyboard controls or a screen reader. Mouse-using learners scan the top content, then use the mouse to click on a link or area of the screen they want to use. A “skip navigation” link lets all the other users do the same thing. It is simply a link at the top of the page that jumps to a target at the beginning of the main content. If it’s in the top left corner, the skip navigation link will be the first thing a keyboard tab will jump to or a screen reader will mention. The skip navigation link can even be hidden so that mouse-using learners will never know it’s there, but hidden links should appear when the keyboard focus is on them.