Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
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.

Related Topics

Related Articles