Focus Indicator

★★★★★
★★★★★
176 users
<
>
1 gal. #MQ3-19 Misty Isle Ceiling Flat Interior Paint and Primer
★★★★★
★★★★★
Dryconn Large Waterproof Wire Connectors, Aqua/Blue (20-Pack)
★★★★★
★★★★★
Nyrius Global Talking Translator Lt12 12 Languages Foriegn Travel
★★★★★
★★★★★
Twizzlers Strawberry Twists 16oz - 6 Unit Pack
★★★★★
★★★★★
Disaronno Originale Amaretto 1.75L
★★★★★
★★★★★
Israel-Palestine for Critical Thinkers [Book]
★★★★★
★★★★★

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

2. 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
Related
Silktide Accessibility Checker
★★★★★
★★★★★
20,000+
WCAG Color contrast checker
★★★★★
★★★★★
80,000+
Landmark Navigation via Keyboard or Pop-up
★★★★★
★★★★★
10,000+
NerdeFocus
★★★★★
★★★★★
1,000+
IBM Equal Access Accessibility Checker
★★★★★
★★★★★
20,000+
Color Contrast Analyzer
★★★★★
★★★★★
60,000+
BrowserStack Accessibility Toolkit
★★★★★
★★★★★
20,000+
ARC Toolkit
★★★★★
★★★★★
40,000+
HeadingsMap
★★★★★
★★★★★
100,000+
Highlight Focus
★★★★★
★★★★★
569
WAVE Evaluation Tool
★★★★★
★★★★★
600,000+
axe DevTools - Web Accessibility Testing
★★★★★
★★★★★
300,000+
Web Disability Simulator
★★★★★
★★★★★
20,000+
Text Spacing Editor
★★★★★
★★★★★
5,000+
Colour Contrast Checker
★★★★★
★★★★★
40,000+
Siteimprove Accessibility Checker
★★★★★
★★★★★
50,000+
Stark Accessibility Checker
★★★★★
★★★★★
10,000+
tota11y for Chrome
★★★★★
★★★★★
1,000+
ARIA DevTools
★★★★★
★★★★★
10,000+
Focused Element
★★★★★
★★★★★
915
Accessible Web Helper
★★★★★
★★★★★
20,000+
Colorblindly
★★★★★
★★★★★
90,000+
taba11y - Tab order accessibility testing
★★★★★
★★★★★
9,000+
Accessibility Insights for Web
★★★★★
★★★★★
100,000+