Chrome and Edge provide a highly visible focus outlines

Written by Stefan Judis
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

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 5.8k readers and learn something new every week with Web Weekly.

Web Weekly β€” Your friendly Web Dev newsletter
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