svinkle
commented
2 years ago The :focus-visible CSS pseudo-class is well supported by major browsers. This is used in our free themes to achieve the effect described here.
What's great about this technique is it gives designers space to be innovative in creating a custom, high contrast focus ring while getting out of the way for sighted mouse users. Focus indicators are to be highly visible and contrast well against adjacent backgrounds (contrast ratio of at least 3:1 between its focused and unfocused state – 1.4.11: Non-text Contrast.)
Please note, for any area where it's assumed the user is going to provide keyboard input (such as an input type="text" element), the browser will draw a focus indicator. This is articulated in the CSS spec in the second half of the opening statement:
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element.
For example, UAs typically display focus indicators on text fields any time they’re focused, to draw attention to the fact that keyboard input will affect their contents.
On the other hand, UAs typically only display focus indicators on buttons when they were focused by a keyboard interaction (such as tabbing through the document)—because it’s not always immediately obvious where the focus has gone after such an interaction, but is sufficiently self-evident when the button was focused by more obviously-targetted interactions, like clicking on the button with a mouse pointer.
Problem The purpose of the focus ring is to clearly show what element is ready for interaction and, when navigating with keyboard, direct users' attention to the element that focus moves to.
When navigating with pointing devices such as mouse or trackpad, the focus ring is often redundant and creates visual noise and distractions instead of adding clarity. This has negative impact on both accessibility and perceived performance.
Suggested approach