Item logo image for Focus Indicator

Focus Indicator

5.0(

2 ratings

)
Item media 1 screenshot

Overview

Adds a high-contrast outline around the element with keyboard focus

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

5 out of 52 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    2.1.4
  • Updated
    March 5, 2025
  • Offered by
    Stefior
  • Size
    25.88KiB
  • Languages
    English
  • Developer
    Email
    contact@stefior.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

HeadingsMap

4.6(72)

To show, browse and audit (for accessibility and SEO) the headings structure

Highlight Focus

5.0(3)

This chrome extension will help you to highlight the current focused element in a webpage

taba11y - Tab order accessibility testing

5.0(15)

Visualise tab order with ease

Accessibility Insights for Web

4.7(38)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

WCAG Color contrast checker

4.2(28)

To check the color contrast between foreground and background of the texts

Landmark Navigation via Keyboard or Pop-up

4.6(9)

Allows you to navigate a web page via WAI-ARIA landmarks, using the keyboard or a pop-up menu.

NerdeFocus

4.5(8)

Quickly debug focus problems when testing a page for accessibility issues.

IBM Equal Access Accessibility Checker

4.9(17)

A web browser extension for checking accessibility issues

Color Contrast Analyzer

3.4(65)

Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements.

BrowserStack Accessibility Toolkit

4.8(62)

Web Accessibility Testing Tool for WCAG & ADA compliance - Empowering Developers and Testers to find and fix accessibility issues.

Colour Contrast Checker

3.9(31)

Check the contrast between different colour combinations against WCAG standards

ARC Toolkit

3.4(24)

Accessibility testing tool from TPGi

HeadingsMap

4.6(72)

To show, browse and audit (for accessibility and SEO) the headings structure

Highlight Focus

5.0(3)

This chrome extension will help you to highlight the current focused element in a webpage

taba11y - Tab order accessibility testing

5.0(15)

Visualise tab order with ease

Accessibility Insights for Web

4.7(38)

Accessibility Insights for Web helps developers quickly find and fix accessibility issues.

WCAG Color contrast checker

4.2(28)

To check the color contrast between foreground and background of the texts

Landmark Navigation via Keyboard or Pop-up

4.6(9)

Allows you to navigate a web page via WAI-ARIA landmarks, using the keyboard or a pop-up menu.

NerdeFocus

4.5(8)

Quickly debug focus problems when testing a page for accessibility issues.

IBM Equal Access Accessibility Checker

4.9(17)

A web browser extension for checking accessibility issues

Google apps