Link states – should keyboard focus replicate hover or active

Question

I realise that this question may be quite specific CSS-wise, but it feels more like a UX question than a StackOverflow one.

My question is should links have a :focus state that replicates their :hover or their :active? I've had a read of some other sites that explain their usages (and I understand them clearly), but none seem to talk about the UX of the variants. I've also yet to find a question on here that properly addresses exactly this problem.

The way I see it is that :hover is a mouse-users indication that there is some interactivity, and that :focus is the same but for a keyboard-user; whereas :active shows that an interaction has commenced. Be that clicking, or hitting enter (although the latter would almost definitely be instantaneous so there might be no perceived :active state).

Is this the correct way to look at it, and if so is this CSS the correct way to approach it:

a {
  color:blue;
  text-decoration:underline;
}
a:hover,
a:focus {
  color:red;
}
a:focus {
  outline: dotted thin;
  // This is a slight tweak to browsers' standard :focus outline
}
a:active {
  color:green;
}

I'd be interested to know what people felt, and if there were any examples where people have looked at the merits of both the :hover, :focus & :active and the :hover & :active, :focus approaches, and which they found to provide a better user experience.

Thanks!

Answer 1

You're pretty accurate already, yes. If you have an obvious distinct :hover state then you should replicate that for your :focus.

The :focus is the most important one though, so make sure that exists in a clear style. Bear in mind that with the hover state, the user is (probably) visually following the cursor so is likely to already be looking at the item that has a hover state, so often designers will user a more subtle effect. However with :focus the user may not be looking anywhere in particular on the screen, so you need to be able to catch their eye with it. That may mean having a different :focus and :hover. But that's not really an issue, unless your styling / branding department have an issue with keyboard users being able to easily use the site!

As far as the :active state goes; that would depend whether you have a bespoke active state for the attrributes. I think that older versions of IE will only recognise the :active state (so if you have a :hover and :focus set up but no :active then it will ignore all of it and not display anything) so in those cases I would replicate the status to hover, focus AND active. But if you have a distinct :active state then there is no need to have the focus state match that one.