Visited links

[snakeling]

Hi! I'm trying to work out what the best way to indicate visited links would be, as per bug #1386.

This is the situation right now:

Tropospherical red/purple

• links are red/purple with an underline
• hover/focus is indicated with a different colour
• visited links aren't distinguished at all

Celerity

• links are greenish with an underline
• on hover/focus, the underline disappear
• visited links are a darker colour

Lynx

• links are blue with an underline
• there is nothing to indicate hover/focus
• visited links are purple

This means that ideally, hover/focus should be indicated on Tropospherical, as well as on Lynx; and that visited links should be indicated on Tropospherical, and maybe made more visible on Celerity.

I'm personally against using bold/normal contrast, especially to indicate hover/focus, as I dislike it immensely when the words on the screen have to rearrange themselves to make room for newly bolded words. I can't imagine I'm the only one on that.

Moreover, most links on DW are unbolded, but usernames are always bolded, which means it could get very confusing very quickly.

Other possible means of indicating visited links in particular would be the use of overlines or outlines, but it's problematic as it's not an established convention.

Of course, there's always the trick of making visited links another colour, but this excludes a lot of people with vision problems.

For testing's sake:

• Tropo Red: normal link -- hover link -- proposed visited link
• Tropo Purple: normal link -- hover link -- proposed visited link
• Celerity: normal link -- hover link -- visited link -- proposed darker visited link

So, mostly, I'd like to have other people's opinions :) What do you think?

Comments

[kyrielle]

I personally loathe it when the text changes shape (including acquiring/losing underlines) due to mouse activity, so the celerity hover link would drive me BATS. (Then again, links with their underlines removed irritate me in general, really.) I do like color-changed links because it's the standard I'm used to, but I can see where that might cause problems for others.

[jesse_the_k]

Another data point: I always turn off underlines because it's type damn it, not a typewriter, so I depend on color change to distinguish. I'm sure you're not coding in the underline, just indicating to the UA, right?

Amen^2 re not forcing the line to move horizontally with bolding. I've seem some sites where the active focus is ALL CAPS, which still moves text around but is somehow less annoying.

There's an interesting thing happening at this site
http://trace.wisc.edu/resources/
When I tab between links, I see a light blue outline. But when I hover my cursor, there's a pale yellow highlight. I didn't realize UAs could distinguish between a tabbed-to-hover and a mouse-hover, but evidently this site does. The pale highlight is very effective for my particular lousy vision, but ... YMMV.

I think the important thing is to make the Lynx scheme as vanilla as possible. If DW can permit Lynx users to select their highlight colors, for example, then you don't have to attempt a one-size-for-all solution.

[jeshyr]

On the point of Lynx letting users select their own more, I'm checking this out. Stay tuned :)

r

[zvi]

Unless I'm missing something, all you have to do to allow people their defaults is not provide color specifications. Then the browser defaults will apply, so the blue/red/purple on white if they haven't changed them, and whatever they selected if they have changed their defaults.

[jesse_the_k]

Umm, d'oh!

[jeshyr]

It seems that making visited links a darker version of the usual colour is fairly standard nowdays. I wouldn't recommend having shape changes either, as Kyriel said, especially removing the underline which is usually the "this is a link" signal.

For people with colour blindness, as long as the darkness is sufficiently different it should be OK. As long as something can be perceived if it's converted to black-and-white then it should be OK for any kind of colour blindness. You can use a colour blindness simulator (link to google search - nothing specific) to check them out.

Also check that all the combinations pass the colour contrast checker as being AA or AAA rating if possible. This is most important for the Lynx colours, but should be our aim for all site schemes.


At this point I'd just link to jump up and down and dance a bit about how COOL it is that accessibility is important to DW and that all our devs and styles people care about it. Thank you for being part of the answer :)

Cheers,
Ricky

[jeshyr]

Another one I found today that may be of use: http://wearecolorblind.com/articles/quick-tips/

r