Additionally, the example relies on the existing :focus behavior and says that if an element has focus, but the browser would not normally show a default focus ring, then it should show a drop shadow. The snippet above says that if the browser would normally show a focus indicator, then it should do so using a 4px dashed black outline. See the Pen :focus-visible example by Rob on CodePen. * Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. This can be helpful if you want the focus indicator to depend on the precision of the input device: */īy combining :focus-visible with :focus you can take things a step further and provide different focus styles depending on the user's input device.

* Focusing the button with a keyboard will show a dashed black line. In Chrome 86 and beyond, this should be all you need to style focus: This allows focus styles to feel more intuitive. :focus-visible, on the other hand, will invoke the same heuristic that the browser uses when it's deciding whether to show the default focus indicator. For some situations this can break the user's expectation and lead to a confusing experience. When you use :focus to style an element, it tells the browser to ignore its heuristic and to always show your focus style. This is why in Chrome tabbing to a shows a focus ring, but clicking it with a mouse does not. Whenever you click on an element, browsers use an internal heuristic to determine whether they should display a default focus indicator. This is where :focus-visible and the Quick Focus Highlight come in.

At the same time, users need to have the final say in the experience and should be able to choose when and how they see focus. To improve on this situation, developers need a better way to style focus - one that matches their expectations of how focus should work, and doesn't run the risk of breaking the experience for users. Therefore, CSS that removes the focus ring (without providing an alternative) is akin to hiding the mouse pointer. As mentioned earlier, for users who rely on a keyboard to access the page, the focus ring acts as their mouse pointer. However, they have unknowingly broken the experience for users relying on a keyboard to access the page. This 'fixes' their issue, insofar as they no longer see the focus ring when they click the menu. If a developer is surprised to see the focus ring when they click the menu, they might use the following CSS to hide it: But adding a tabindex to an element causes all browsers to show a focus ring on that element if it is clicked with a mouse. Oftentimes they do this because the underlying behavior of focus can be difficult to understand, and styling focus can have surprising consequences.įor example, a custom dropdown menu should use the tabindex attribute to make itself keyboard operable. Unfortunately, many websites hide the focus ring using CSS. Problems with focusįor users who rely on a keyboard or other assistive technology to access the page, the focus ring acts as their mouse pointer - it's how they know what they are interacting with.

If a user is tabbing through a form, the focus ring indicates which text field they can type into, or if they've focused a submit button they will know that pressing Enter or Spacebar will activate that button. The focus ring signals to the user which element will receive keyboard events. This is sometimes referred to as the 'focus ring' because browsers typically put a solid or dashed ring around the focused element. When a user interacts with an element the browser will often show an indicator to signal that the element has 'focus'. It will also cause all CSS focus styles to match regardless of the input device that is interacting with the page. The Quick Focus Highlight will always display, even if a page has disabled focus styles using CSS. The Quick Focus Highlight is a user preference that causes the currently focused element to display an indicator for two seconds. This makes styling focus more predictable. The :focus-visible pseudo-class is a CSS selector that lets developers opt-in to the same heuristic the browser uses when it's deciding whether to show a default focus indicator. Chrome 86 introduces two new features that improve both the user and developer experience when it comes to working with focus.

Fokus blog