Chrome and Edge provide a highly visible focus outlines

Written by Stefan Judis
Published at
Updated at
Reading time
1min

Adrian Roselli shared that Chrome and Edge provide highly visible focus outlines.

Go to their accessibility settings pages to turn on the feature:

  • Chrome: chrome://settings/accessibility
  • Edge starting with v94: edge://settings/accessibility

Settings labels. Chrome: Show a quick highlight on the focused object. Edge: Show a high visibility outline around the area of focus on the page

When turned on, you see that focused elements receive an additional border and box-shadow.

Improved focus visibility in Chrome/Edge

I haven't decided yet if I keep highly visible focus outlines turned on in Chrome/Edge, but I'd wish Firefox would offer a similar feature or improve their focus outlines at some point.

(the tiny dotted line bugs me for years by now πŸ™ˆ)

Edit: Ε ime pointed out that you can change Firefox' focus outline by navigating to about:config and changing browser.display.focus_ring_style to 0 and browser.display.focus_ring_width to 4. πŸ‘

Firefox "about:config" with tweaked focus_ring styles

The configuration then enables more visible Firefox focus outlines. πŸŽ‰

Default and adjusted focus outlines next to each out. Default is just a dotted line, whereas the adjusted one is clearly visible.

If you enjoyed this article...

Join 6.3k readers and learn something new every week with Web Weekly.

Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles