Posts from Monday, June 11th, 2007

Thanks to everyone who shared their thinking on the ordering of link states.  It looks like a minority of people were in favor of my preferred ordering, which is: Link-Visited-Hover-Focus-Active.

The reasoning is fairly straightforward, and starts with the assumption that a person who uses solely a keyboard to navigate won’t ever encounter a hover effect.  Thus, for such users, the states might as well simply be LVFA.  For them, the placement of the hover styles is irrelevant.

On the flip side, a person using a mouse to navigate will have far more links in hover states than focus states.  Once a link is selected (clicked) by a mouse-wielder, the link enters the active state until the user lets go of the mouse button.  Then it’s both in focus and hovered, at least until the mouse cursor moves away.  (It’s also either visited or unvisited, but that’s not relevant to the question at hand.)

So in this situation, I want to provide a visual cue that the link has in fact been clicked, even though the mouse button is no longer down.  I want this to happen regardless of the hover states of the link.  Therefore, the focus styles need to come after the hover styles.  If not, the focus color will only take effect once the mouse moves away from the link, thus exiting the hover state and removing the hover color.

Yes, this will only take hold in browsers that update the focus state while asking for the requested page.  While that isn’t all browsers, it’s most of them, from what I can tell.  Safari 2.x seems to be the notable exception.  (I didn’t test 1.x, and haven’t installed 3.x yet because I don’t want to lose 2.x.)

So what mnemonics can we use to keep this ordering straight?  I’ve come up with a few.

• LoVe’s Hurts Fade Away
• Luther Vandross Hits Fabulous Arpeggios
• Lord Vader Hates Furry Animals
• Lusty Vampires Hunger For Absinthe
• Lord Voldemort Has Foul Ambitions

What do you have?