21

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.

Improve this question

3 Answers 3

Reset to default
19

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

Improve this answer
1
  • 1
    That tracking makes my skin crawl. Waht is "compo se"?
    – invot
    Mar 8, 2018 at 18:15
8

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.

Improve this answer
2
  • 2
    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, 2017 at 22:25
  • I agree with your idea highly as on mobiles when there is no hover then on your desktop and mobile version of website will have different button pressed state which is a bit inconsistent
    – Ahsan Idrisi
    Sep 8, 2021 at 8:36
2

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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