While I’m generally impressed at the new design at CNet News.com, there’s one thing that bugs me – the links. Although the mouse-over effect, where the links only become underlined when the mouse hovers over them, is quite ‘cool’, it has a major problem with accessability. Let’s take this screenshot from a recent article about VeriSign:
As you can see, the only thing that differentiate links from the body text is the red colour. No bold, no italic, no underlining, just a different colour. So what if you were colourblind, or had a black and white monitor?
The above screenshot is the same text, but the image has been converted to greyscale. As you can see, the links don’t stand out nearly as well – in fact if you can’t see well they’d be almost invisible.
Now the conspiracy theorists among you may wonder if this is a ploy to stop people following external links and therefore leaving the site, but links to related articles on CNet are also linked in the same way; indeed the second link in that screenshot takes you to an article published the previous day on the same subject. That said, the list of other top stories at the side of the article has the links presented in the standard way – blue text (which stands out more than red) which is underlined. It’s clear to see that those are links, and that’s how links in the body text should be.
When I did the latest design for this site, I wanted to go on the same route, in that I wanted to make it obvious that a link embedded on body text would stand out, and that it would be instantly recognisable as a link. Now admittedly I haven’t used the standard blue colour, instead going for a slightly lighter shade of blue which fits better with the design, but there is still an obvious distinction between body text and an embedded link.
It’s disappointing that such a major site like CNet has done this, especially as it was fine beforehand.