Users who use only keyboard and assistive technologies rely on visible focus outline of the page during navigation. Often developers use CSS to provide custom outline styling that is not visible or removed with outline: none.

This accessibility bookmarklet Adds a 4 pixel solid orange outline around all focusable elements so that you can see your location on the page when TAB-ing around. When the visible focus is provided as outline: accessibility testers can quickly use this bookmarklet to tab and see which of the interactive elements get tab focus and which of them are not keyboard operable.

Focus Bookmarklet for Accessibility Testing

Adds a 4 pixel solid orange outline around all focusable elements so that you can see your location on the page when TAB-ing around.

Focus Bookmarklet Code

See the Pen Focus Bookmarklet by HolisticA11Y by HolisticA11Y (@HolisticA11YHub) on CodePen.

We hope these accessibility bookmarklets come in handy during your next accessibility audit.

Reference: Accessibility Bookmarklets