Force Focus Accessibility Bookmarklet to Provide Visible Focus Outline

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.

Using Force Show Focus Accessibility Bookmarklet to identify focusable elements, When TAB-ing around the page, the elements come in focus with an orange outline.
Force Focus Accessibility Bookmarklet

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

Leave a Comment

Your email address will not be published.