Accessible Links With CSS – More than just :hover

Designers and coders alike commonly overlook the importance of anchor tags and their styling on a web page. Aside from accessibility for a moment, developers often miss the visual usability of some links on a page. From main navigation to external references, links cover a wide range of behaviors and can be styled to visually hint (or cue) as to the link’s function.

A good designer will use cues to help users find what they need faster. Links can be more effective (and thus more usable) by following some of the preferences and conventions I have outlined below.

Underlining

Generally, links should always be underlined. With the increase of UI complexity and advanced layouts, we expect users to easily comprehend our designs and as a result we see less of this on graphical navigations, or areas where there are many links (in a link cluster, sub-navigation, or post-bit tools). While underlining these types of links may not be as necessary today, it’s important we focus on keeping content-area links as usable as possible.

Dotted Underlines
Links with a 1 pixel dotted underline can be a very trendy look, just look at this site. Keep in mind, the default usage of dotted underlines is on tool tips and acronym definitions.

TIP: IE6- and FireFox render the CSS attribute border: 1px dotted #000 differently, so I recommend to use a combination of background-image (2×1 pixels graphic) and padding-bottom instead of border to achieve a dotted underline cross-browser.

Visited Links

On any given web page, users should be able to immediately know where there are, where they have been, and where they can go. Breadcrumbs are usually a great way to achieve at least the first two instinctively. However, further styling of content-area visited links is imperative for usability – imagine looking for something on google and not knowing which pages you’ve already been to! The browser default (thus standard) visited link color is #660099, but if your links are a different color you can usually achieve a usable visited color by desaturating and darkening your default link color a bit.

External Links

External links can have a graphical indicator to let users know they are leaving your site. I also recommend using target="_blank" for external links. Many have argued this in the past, but I think the positives outweigh the negatives when it comes to opening external links in a new browser. I would hate for a user to lose access to my site simply because they closed their browser after they didn’t like what they saw on a link they followed!

TIP: Use a CSS selector to easily style external links in most modern browsers.
a[href^="http:"] { padding: 0 16px 0 0; background: url(images/link_external.gif) no-repeat 100% 4px; }

UPDATE: We noticed the other day that IE6 (and below) will incorrectly render inline links with a background image positioned to the bottom right (if the link is more than one line) of the link. To fix this there are basically two options:

1. Insert a <span> </span> at the end of the link text (before the </a>), and apply the background image to the <span>.

a span { background: url(images/link_external.gif) no-repeat 100% 4px; padding:2px 3px; }

2. Hide the background image from IE6 and below.

* html img { background:none; }

Different Media Types

How many times have you accidentally opened up a huge PDF in FireFox and had to wait forever for Acrobat to boot up? Luckily, there are some conventions to follow that can clue the users in as to where our users are going.

Use Icons
Icons help users instantly identify a link with something from their filesystem.

TIP: Use CSS to setup a few common classes that you can easily apply to your links.

<br></br> .pdf { padding: 0 14px 0 0; background: url(../images/link_pdf.gif) no-repeat 100% 2px; }<br></br> .doc { padding: 0 15px 0 0; background: url(images/link_worddoc.gif) no-repeat 100% 4px; }<br></br> .excel { padding: 0 15px 0 0; background: url(images/link_excel.gif) no-repeat 100% 4px; }<br></br> .rss { padding: 0 15px 0 0; background: url(images/link_rss.gif) no-repeat 100% 4px; }<br></br> .zip { padding: 0 16px 0 0; background: url(images/link_zip.gif) no-repeat 100% 4px; }

Example

Show File Size
Another good cue for links is file size. When placed next to the icon, this can make a link much more usable. Especially since the filesize of a link target is not readily available through the browser.

Example

Hover Styles

These are very important and should be sensible. Links should still be legible on hover, if not more legible than before. It is also common to add or remove an underline on hover which is usually sufficient.

Learn the A Tag

The W3C has all the attributes listed with their usage. It’s great to know this basic information because links are the first part of navigation.

Some key (and underused) attributes of the A tag:
name
Naming links through out your document provides a semantic as well as navigational purpose. You can then link to your document’s anchors from within itself (or elsewhere). <a href="#content">Jump to content</a>. These attributes may serve other purposes than styling, but learning about them helps to understand the A tag even better.

rel
rel describes the relationship between the anchor and it’s src value. This attribute has semantic value as well as can be used as a hook by CSS / JavaScript selectors for advanced functionality.

accesskey
These are always helpful. They allow users to tab through your navigation tree by holding shift and pressing whatever access key you define.

tabindex
If you are using the A tag as part of a form, then it can be given a tabindex like any other form element.