I'm in the midst of redefining a cross-application style guide, and I want to make sure we're accounting for accessibility in the design, including contrast ratios, text sizes, and focus states. One issue that's been bugging me is whether the :focus state for buttons, inputs and the like should be the same as the mouse :hover state, or if it should be distinct so they could be layered together. I'd love to get some reasons why they should or shouldn't be separate.

The focus state should be more obvious than the hover state

A mouse over or :hover state is a more direct interaction (i.e. the user is controlling the mouse cursor directly over the button they want to click)

The :focus state, on the other hand, requires a separate scan of the entire page in order to determine which component is currently being targeted. For example, a user may press the TAB key a few times until a focus rectangle lands on a link, button or other input they want to access or "click" by pressing the ENTER key. The item that currently has focus needs to be obvious so that the user knows when to stop pressing the TAB key and can confidently interact with the focused target. It is common to place some sort of rectangle around a focused button that is easy for the user to spot.

In the case of a hover event the mouse cursor itself fills this role so a focus rectangle isn't required.

Below is an example showing different button states in Gmail...

gmail button states

  • That tracking makes my skin crawl. Waht is "compo se"? – invot Mar 8 at 18:15

Honestly, as long as your :hover state & :focus state are very clearly showing exactly which item will have action the taken on it, I can't see any reason to style them separately. :focus is essentially a keyboard hover.

The previous answer is correct in saying that a :focus element should contain a box around it, but as long as the outline property isn't hidden, it shouldn't be an issue.

The only time it might be worth styling separately is if you are auto-focusing on items without the user directly interacting with them.

  • 1
    So in principle you seem to be saying: style them 'the same' but make sure to also add an outline? Styling them 'the same' would be a bit of a contradiction, and only work in case all hover styles use an outline as well. – Steven Jeuris Feb 15 '17 at 22:25

All visual states can be combined in a matrix. Indeed focus needs more distinction than hover, but can also be combined when you hover over your focused element.

These states can also be combined to unselected and selected items.

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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