Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published