Link States test

What does it do?

Check whether links have distinct appearances for key states, such as being hovered over or visited previously.

Example results

Example of link states test results

Why is it important?

This test tests whether text links vary in appearance when:

  • Hovered over
  • Visited previously
  • Focused (via keyboard or other non-mouse interface)
  • Active (old means of defining a Focused link, used by Internet Explorer 7 and older)

It is considered best practice to distinguish links in these states, particularly for accessibility and usability.

Hovered links indicate what text can be clicked on. Visited links indicate links that have already been visited, aiding users in their exploration of the site. Focused links are invaluable for users who can’t use a mouse (e.g. those with disabilities, or some classes of mobile device), as they highlight what link they currently have selected. Active links are the equivalent to Focused links for older versions of Internet Explorer. Many websites only define Active links and omit the correct, more modern Focused standard used by all non Internet Explorer browsers, and from IE8 onwards.

How is it measured?

The test looks at the use of styles in the site and calculates how different types of link differentiate themselves on each page. A link must change visually for each state, for example using a different colour or toggling the underline on the link.

The final score is based on the proportion of text links which define each of the four possible styles. Only links containing text are counted.

Technical explanation

Sitebeam parses the complete CSS of each page, and virtually renders each page in order to determine the fonts, sizes and link styles used throughout. The parser supports CSS2. Fonts are only measured when they are applied, so styles which are not used are ignored.

The final score assigns different relative weights to each type of link:

  • Hover pseudoclass: 3
  • Visited pseudoclass: 2.5
  • Focus pseudoclass: 2.5
  • Active pseudoclass: 1

Potential problems

If your website does not use CSS at all, this test will be unable to give much useful feedback. The vast majority of websites now use CSS for at least some of their website, sites which don’t use CSS will receive the lowest score of 0 automatically (virtually no sites do this).

The CSS parser may not parse CSS in exactly the same way as your selected browser (bear in mind that all browsers parse CSS differently, and Sitebeam can best be thought of as another browser, more similar to Firefox than Internet Explorer). This is usually of no consequence to this test, unless your CSS is non-compliant or broken in some way. For example, some CSS authors use deliberately broken CSS to trick certain browsers into ignoring their code, whilst others will see it. In these instances, the behaviour of Sitebeam is relatively unpredictable. It should be noted that such tricks are considered bad practice, as they may break in new or unknown browsers. In practice the effect on text is minimal.

How to improve this score

Making the four main link states distinct will improve the accessibility and usability of your website. In general this is very easy to do, and requires only modest changes to your stylesheet(s).

As an example, this basic CSS defines distinct link styles for all links:

a:hover { text-decoration: none; }
a:visited { color: #808; }
a:focus, a:active { color: #B00; }

Note that usually you’ll want to define your Focus and Active pseudoclasses as equivalent.

How to use this test effectively

This test can help tell you how well built a website is, and is particularly illuminating as most of these aspects are not obvious to non-web professionals. New websites should score very highly for this test, as long as they follow best web practices.

Further reading
