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)
: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...
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.