4

I'm working on the definition of focus for some of our components and I'm suggesting that the focus outline is only shown when the user uses an alternative input method that is not a mouse.

However, one of my colleagues advocates that inputs (text box, etc) will always show the outline, even if you are interacting with the mouse.

I'm not against it, I just need to know why but without the technicalities of :focus vs :focus-visible etc.

As we already have a definition for active (the color changes so people know that they are currently focused on that input field), do we need the focus outline for the users using the mouse?

2 Answers 2

7

Yes, please keep the focus indicator

There are multiple reasons why the user would want to have clearly visible focus states, even if they're only using the mouse to focus the fields.

  1. The form has multiple fields and the user needs to refer to some external data to fill them out one by one, e.g. looking at the credit card to enter its details. If it's not clearly visible which field is focused (and the blinking cursor may not be too visible if the user has vision deficiencies), filling the form becomes trial-and-error.
  2. Some users suffer from motor impairments – Parkinson's disease, lack of hand-eye coordination, or just feeling tired late at night – so having a clear confirmation that they have clicked on the right element is welcome.
  3. Quoting WCAG 2.1 criterion 2.4.7: People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
  4. The user might want to start with a mouse, and then switch to tabbing through form fields. It would be beneficial to clearly see the starting point of their keyboard navigation.
  5. This might not be relevant on current browsers, but it was an issue a few years ago: If the user has focused a numeric input field and scrolled using the scroll wheel, the value would change. Having a clearly visible focus state would help identifying the issue why the page doesn't scroll.

Color is not enough

Please also note my frequent use of "clearly visible" in this answer. You've mentioned that the color changes so people know that they are currently focused on that input field – is it only the color that is changing? If so, this might not be clearly visible to everyone.

A significant portion of the population suffers from vision deficiencies, including shortsightedness and color blindness. If the focus indicator is subtle, or the field's color changes from red to green, then that makes it imperceptible to those users. This is why WCAG 2.1 suggests using a two-color focus indicator, and why websites like UX Stack Exchange draw a thick outline around the textarea – it's just more visible than tinting a 1px border.

1

If I understand right your input components already have a visual feedback if they are active. So you are talking about an additional visual feedback for users who might use the keyboard.

We implement this additional focus not only on input elements but also on all clickable elements like menu items, links, buttons etc. this additional focus is designed in a way that it stands out and is clearly visible.

If a user uses the mouse to click a button, link or menu item it is really not necessary to highlight this element, since the user already found it and even interacted with it. So the information that this element is focused (because it was clicked) is not useful to this users. But it is essential for users who use the keyboard.

Having said so: No this focus outline is not necessary to users using a mouse, it could rather be confusing to them.

Your Answer

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

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