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.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 18 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.