WebExtension.net
WebExtension.net
Toggle dark mode
WebExtension.net
WebExtension.net
Focus Indicator

Focus Indicator

View on Chrome Web Store
View Focus Indicator Chrome Extension on Chrome Web Store
Add to bookmarks
5.0 (5 ratings)
1 new ratings
0 views
This extension has been viewed 0 times
0 downloads
This extension has been downloaded 0 times

Data is synced from the Chrome Web Store. View the official store page for the most current information.

Adds a high-contrast outline around the element with keyboard focus
Type
Extension
Users
295 users
3
Stefior
View author page of Stefior
Published
Published on April 22, 2024
Version 2.1.4
Manifest version
3
Updated
Updated on March 5, 2025
make_chrome_yours/accessibility
Extension Category
View on Chrome Web Store
View Focus Indicator Chrome Extension on Chrome Web Store
Share This Extension
Share on Twitter
Share on Facebook
Share on LinkedIn
Share on Reddit
Share on Bluesky
Share on Pinterest
Focus Indicator Chrome Extension Image 1

Description

I predominantly use my keyboard to navigate websites, but many sites don't always make it clear where the keyboard is focused. This extension aims to help solve that issue by putting a white or black border around the focused element, depending on whichever results in a higher contrast.

Focus Indicator uses multiple strategies to aim for it to work effectively across all websites, but it can't account for every improper accessibility setup. For example, if a site has a focusable element out of the screen's bounds, it won't show any difference. It also doesn't affect which elements are able to be focused with the keyboard.

It prioritizes function over form. If you'd like, you can disable the extension on certain sites (blacklist them) or you can enable the extension only on certain sites (whitelist them). All settings can be configured by clicking on the extension's icon.

There are two focus indication methods, depending on your preference:

  1. Overlay (default, new with version 2)
  • Works by having a floating outline above the current focused element's position
  • Almost guaranteed to show the outline if it is possible to, EVEN IF the focused element is behind another element
  1. On Element
  • Works by modifying the current element's focused styles
  • The indicator will sometimes end up partly or fully covered up by other elements, but it can be less intrusive

Overlay Mode settings:

  • Indicator color mode
    • Solid (default) - The outline will be either solid black or solid white
    • Hybrid - The outline will be a black and white inversion of whatever is directly behind each individual portion of it
  • Outline width (default: 4px) - Adjust the thickness of the outline
  • Outline offset (default: 1px) - Set how much space there is between the element and the outline
  • Use transition between focused elements (default: off) - Animates focus shifts for better visual tracking
  • Use "On Element" mode for text input elements (default: on) - The overlay may cover text while typing in certain text input elements, mainly in online code editors, so "On Element" mode can be used for just those elements instead
© 2025 WebExtension.net. All rights reserved.
Disclaimer: WebExtension.net is not affiliated with Google or the Chrome Web Store. All product names, logos, and brands are property of their respective owners. All extension data is collected from publicly available sources.
Go to top