Chrome 86’s ‘Quick Focus Highlight’ will boldly mark what’s currently ‘focused’

With the upcoming version of Chrome, Google is introducing a “Quick Focus Highlight” feature that’s particularly useful for those that navigate the web using a keyboard or assistive tools.

When a user interacts with an element the browser will often show an indicator to signal that the element has “focus”. This is sometimes referred to as the “focus ring” because browsers typically put a solid or dashed ring around the focused element.

The focus ring signals to the user which element will receive keyboard events. 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.

For two seconds, Quick Focus Highlight shows a white-blue outline with a blue glow around the currently focused element.

The Quick Focus Highlight will always display, even if a page has disabled focus styles using CSS. It will also cause all CSS focus styles to match regardless of the input device that is interacting with the page.

Alternating colors are leveraged to ensure proper contrast on any background, while the temporary nature ensures that text or other page content is not obscured. Google notes that it’s not “always on” for this reason, but that could be “changed in the future if users would prefer that it always stay on.”

Version 86 of Chrome also introduces :focus-visible to make styling focus more predictable for developers:

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.

Version 86 of the browser will start rolling out in October. The new option can be enabled from Settings > Advanced > Accessibility > Show a quick highlight on the focused object. Google notes that years of development went into Quick Focus Highlight and :focus-visible in Chrome.

:focus-visible and the Quick Focus Highlight are the product of years of work and feedback from developers in the :focus-visible WICG repo and the standards bodies. We’d like to say thank you to everyone who helped shape these features.