Summary

Ensure links are understandable and distinguishable from their surrounding text.

Techniques

Example

Example 1 — Link with full context of destination

The user can determine the destination of the link from the text of the a element alone.

<p>For more information, refer to <a href="#…">Section 1.1
   of Web Publications</a></p>
Example 2 — Link with alternate text

The title attribute is used to provide additional context.

<a href="#…" title="The EPUB specifications">click here</a>
Example 3 — Visual distinction using bolding

By specifying bolder, either a medium font or a bold one is used to help make links visually stand out from their surrounding text.

a {
   text-decoration: none;
   font-weight: bolder;
   color: rgb(51,102,204);
}
Example 4 — Visual distinction using a border

A dotted border is placed under all links to highlight them instead of a line.

a {
   text-decoration: none;
   padding-bottom: 0.3rem;
   border-bottom: 0.1rem dotted rgb(100,100,100);
}

Explanation

A common problem when creating hyperlinks is that the text inside of the link does not provide the full context of what is being linked to. The assumption most people make is that links are only encountered where they are placed in the text, when in reality users can iterate over the links before, during and after reading a section. Without meaningful labels, the result can be a confusing mess of "see here" and "read more" link text being offered with no indication of where those links go.

To avoid this problem, always ensure that the text of the hyperlink is meaningful on its own. If you can read the link out of the context of its surrounding prose, and it clearly indicates where links to, you will improve the experience for users using ATs.

Overuse

A more complicated issue with links is the number to include in a document. The more that you use, the more inconvenience it can cause to your users. For example, keyboard users may have to tab through all of the links to locate one they want to follow after finishing a section. Another problem is that linked text is often preceded by the word "link" being announced to the user, which can disrupt the reading experience when done in excess.

The complicating factor is that generous hyperlinking can also be of benefit to many users, too. Keywords are often hyperlinked to their definitions, for example, which can quickly lead to tens and hundreds of hyperlinked words in a chapter. Although an impediment to some users, the ease of access often facilitates the process for users with learning disabilities and cognitive issues.

Removing redundant links from EPUBs is a good idea, but what constitutes redundant linking has to be addressed on a case-by-case basis. Hyperlinking only the first instance of a keyword in each chapter might be one method of reducing the overall number, for example.

Perception

Another problem with links is that they cannot always be perceived by a user (e.g., color blindness may make the links imperceptible from the surrounding text), in which case the person will not be aware that they are potentially missing access to additional information.

To avoid the problem of links blending into their surroundings, hyperlinked text should be discoverable by more than just its color. Underlining of links is not required, but some other visual cue should be provided if underlines are removed (e.g., increased bolding of the font).

Avoid overriding the color of visited links to make them match unvisited links, particularly in heavily cross-referenced works. A lack of visual distinguishment of where the user has already been can cause navigation problems for some users.

It is also helpful when possible to alert users that clicking on a link will open a new window, as such changes in context can be disorienting for users.

Related Links