2

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!

2

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.

  • Thankfully I'm the front-end and the designer in this case so looking to set a precedent to work from. You make a great point about the :hover being something someone is already engaging with, whereas :focus is tabbed to. Whether the :hover styling is enough will depend on the :hover styling as you say, so it may be a case of beefing it up slightly (with an outline or some other style change) to indicate where a user has tabbed to. – Rob Sterlini Sep 16 '14 at 13:15
  • In my experience, branding / marketing people will be more concerned with what the hover state looks like, and have little / no concern about the focus state. My personal preference is to make the focus state very obvious (maybe even off-brand) to increase the visibility of it, but ensure the hover state still fits within the brand guidelines. That way you can (hopefully) keep everyone happy! – JonW Sep 16 '14 at 14:25
  • (This is for a boilerplate so ignore the colours, they're deliberately annoying to force a change when starting the project). Here's what we went with as a base – recordit.co/ju9OYYb3cT – it's not showing particularly well, but that's the recording I think. A little jump shows me where I am in the page, but still toying with further things, possibly making the outline more visible (the dotted is maybe a tad too subtle). – Rob Sterlini Sep 16 '14 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.