Accessibility Bookmarklet to Identify Tabindex Attributes on Web Page

Custom controls that are built using the WAI-ARIA roles, states and properties need tabindex attribute to provide keyboard focus. When the tabindex attribute is not according to specification it tends to break the focus order of the page.

Accessibility bookmarklet showing tabindex attributes on a web page
Tabindex Bookmarklet

Tabindex Bookmarklet for Accessibility Testing

Tabindex bookmarklet helps users to identify the use of tabindex attribute on the page. This bookmarklet can recognize the negative tabindexes and positive indexes. During an accessibility audit it is important to know if the page flows in right focus order, when tabindex of 0, 1 or -1 is provided it alters the focus order of the keyboard navigation. Tabindex bookmarklet identifies and presents all the content that is provided with a tabindex values, and developer or accessibility tester can then evaluate if tabindex values are applicable or not.

Tabindex Bookmarklet Code

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

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

Reference: Accessibility Bookmarklets