Skip to content
Quickly debug focus problems when testing a page for accessibility issues.
JavaScript CSS
Branch: master
Clone or download
Latest commit 2ab6349 Jan 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Bug Fixes Dec 23, 2017
src Bug Fixes Dec 23, 2017
.gitignore Initial Commit Dec 19, 2017
Gruntfile.js Initial Commit Dec 19, 2017
LICENSE.md Initial Commit Dec 19, 2017
README.md New Screenshots Jan 17, 2018
package.json Initial Commit Dec 19, 2017

README.md

NerdeFocus Bookmarklet

NerdeFocus is a quick way to debug focus problems when testing a page for accessibility issues. When activated, it will animate and accentuate the focus ring and display the CSS selector of the currently focused item. NerdeFocus will alert you when there is a focus reset, and when the focus indicator is hidden or off-screen.

Installing

Create a new bookmark with the following URL:

javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://rawgit.com/wizzyfx/nerdefocus/master/dist/nerde.min.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://rawgit.com/wizzyfx/nerdefocus/master/dist/nerde.min.js';}})();

How to Install a Bookmarklet

Usage

When loaded, NerdeFocus will be placed on the bottom center of the web page. It displays the CSS path of the currently selected element. Clicking on the path expands the focus history.

Screenshot showing CSS path feature

Screenshot showing focus history feature

Screenshot showing focus reset detection feature

Screenshot showing off-screen detection feature

Authors

  • Ugi Kutluoglu - Initial work

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

You can’t perform that action at this time.