March 20, 2006

Blue Sky Links

Should links always be underlined[1]? If not, when is it acceptable to drop them?

Many designers consider underlines ugly or at best inelegant; for them, the ideal method of link decoration is color, and color alone, as it's the most aesthetic solution. However it's also the least accessible. The problem is colorblindness. Approximately 8% of all males in the United States are colorblind. Of these, about one-quarter, or 2% of the male population, suffer from dichromatic colorblindness, which is the complete absence of one of three eye pigments. Most of the remaining colorblind males (about 6% of the male U.S. population) are anomalously trichromatic; these men possess all three eye pigments, but one or more is abnormal. I'm in the latter group, and there are websites where I can't see the links or can only do so with difficulty.

All major web accessibility guidelines, including the U.S. Federal government's 508 Section Standards and the W3C's Web Content Accessibility Guidelines, make the same recommendation about color. As the W3C puts it, "Ensure that all information conveyed with color is also available without color, for example from context or markup." The W3C considers this a Priority 1 recommendation, one that web content developers must satisfy, as it is "a basic requirement for some groups to be able to use web documents."

Note that "from context or markup" is open to interpretation. When exactly does context or markup provide an adequate alternative to color? Two obvious examples come to mind: horizontal nav links and side links. For the former, I believe it's clear from visual context that a horizontal list of words near the top of a webpage are likely links, particularly if the words are styled in certain predictable ways—they're large, or separated by pipes, or presented in a different font, etc. Similarly, both context and markup help to indicate that a vertical list of words along the side of a page, particularly when preceded by a header, are also links. In both cases, then, it seems safe to drop underlines. In contrast, inline links, such as those in the previous paragraph, receive no help from context or markup and must be indicated with underlines or the equivalent.

These three examples—horizontal nav links, side links, and inline links—show that we can expect users to make certain basic visual distinctions, just not distinctions that rely solely on color. This principal is fundamental to accessibility, but what does usability tell us? For example, consider article excerpts as presented on a typical company homepage. Invariably such excerpts include links to full article pages, and these links point from one or more elements: article titles, article dates, article comment links, and article permalinks. In many cases, none of these links are indicated with anything but color. (The one exception, permalink icons, are not recognized by nearly enough users to serve as an adequate substitute for underlines or the equivalent). Of course most users will realize that links to individual article pages must exist and will quickly mouse over the various candidate elements to find them. However, a small percentage of users—the less experienced and less savvy—will likely fail to realize there's more to read and won't bother look for these "missing" links. To me this is bad usability, for it forces everyone, even experts, to guess what's a link.

Doubtless some less obvious examples exist between the extremes I've presented here, but the basic principle is, to my mind, inrefutable: Links should be as clear as the clearest blue sky, even to those can't actually see the color blue.

• [1] I don't mean to limit the question to underlines (as in text-decoration: underline;), for the same purpose can be served with overlines, bottom borders, bold styling (on a site that reserves bold for links), and other methods. However, since underlines are the browser default and the most common method used, I use the term here to refer to all methods of link decoration that don't rely solely on color.

Published in Accessibility, Design, Usability, WWW, Web Standards