3

I've seen some discourse online that best practice is to design the 'focused' and 'hover' states of buttons differently.

I was wondering if there is any practical reason or accessibility requirements to have the the 'focused' state visible at the same time as the 'hover' state (e.g. if a user uses TAB on a keyboard to focus on a button and then hovers over it with a mouse, is it acceptable if the hover state makes the 'focused' state disappear)?

Thanks!

4
  • No WCAG requirements other than the color contrast of the state (WCAG 1.4.11) should be 3:1 with adjacent colors if the color is needed to identify the component. I always recommend that whatever visual candy an element has for hover also be displayed upon focus (in addition to the focus state). May 12 at 21:34
  • thanks @slugolicious! Why do you recommend that the visual style for hover is also displayed upon focus?
    – Mark
    May 14 at 12:06
  • Usually, a lot of work goes into creating a hover state to give the mouse user some extra visual clues. Sometimes that hover state actually reveals more information, such as a product picture link displaying another view of the product when hovered over. That same benefit of a hover state should not be limited to just mouse users. Keyboard users, whether that's because of low vision and the use of a screen reader, or a sip-and-puff device user, or a speech interface user, should all be able to enjoy the benefit of a hover state. May 14 at 14:53
  • While I agree that hover and focus states should deliver the same information, that doesn't mean they shouldn't be styled differently. When a button got focused through keyboard navigation and you hover over it, it would be nice see it react to the movement and have some cue that it allows interaction using the mouse as well. The difference should be subtle enough to know that the focus state and hover state mean the same thing.
    – jazZRo
    May 15 at 10:13

2 Answers 2

2

This example taken from the W3C Web Accessibility Initiative (WAI) shows that's there is no intention in the accessibility standards to make a visual distinction between hover and focus. As long as both are accessible in their own context it is fine.

Hover and Focus states

Change hovered or focused menu items, which gives users visual guidance > when navigating the menu. In this example, hover and focus states use an > inverted color scheme (blue on white instead of white on blue) and > underline.

nav a:hover,
nav a:focus {
  color: #036;
  background-color: #fff;
  text-decoration: underline;
}

Source: https://www.w3.org/WAI/tutorials/menus/styling/#hover-and-focus-states

A good reason to make the distinction is that hover states can be a bit more subtle since the eye is following the cursor. A focused element might not be noticed so easily and may be styled so that it stands out a bit more.

The hover state should (if styled differently) indeed override the focus state for the same reason the hover state exists in the first place: to make the element react to movement and show that it allows interaction.

0

If element F is focused and element H is hovered over, and the user has released the mouse, then the user presses the Enter key, will this activate F or H? F, but how can the user know this if they are styled alike? Using the same style foments error.

3
  • I don't follow the "mouse release" part of your scenario. The hover state happens just by moving the mouse over an element. Are you saying if the user mouse clicks on an element but is holding the mouse button down at the same time they press the ENTER key and then they release the mouse button? The mouse down event will change the keyboard focus to H so a mouse up will select that button and a subsequent ENTER at the same time will also select H so you'll get two onclick events. May 14 at 14:59
  • Ok, I read your comment again. Perhaps "released the mouse" means you just moved the mouse pointer to H (without pressing any mouse buttons) and then you took your hand away from the mouse and then you pressed ENTER while F still had keyboard focus. In that situation, then I can see how both F and H might appear the same. The word "release" confused me because I associate "release" with "press and release". May 14 at 15:02
  • Sorry for the confusion. I meant exactly what you said in your second comment. May 15 at 15:29

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.