« Back to home

Focus and navigation bookmarklets explained

These bookmarklets help you inspect how keyboard focus moves through a page. Use them to review focus order and identify how tabindex has been used.

This page explains the bookmarklets available on the Intopia's accessibility testing bookmarklets page.

On this page

• Bookmarklet 9. Track focus order
• Bookmarklet 10. Highlight tabindex

Bookmarklet 9. Track focus order

Tracks keyboard focus as you move through a page using the Tab key. Each focusable element is numbered in the order it receives focus, making it easy to inspect the page's keyboard navigation sequence.

The currently focused element is highlighted with a badge showing:

• the focus order number
• the HTML element
• its id (where present)
• its ARIA role (where present)
• its accessible name (where available)

Previously visited elements remain outlined until the bookmarklet is dismissed.

Use this bookmarklet when you want to:

• inspect the keyboard focus order of a page
• identify unexpected tab order
• review which elements receive keyboard focus
• understand how keyboard users navigate a page

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Track focus order bookmarklet.
4. Press Tab to move through the page.
5. Press Shift + Tab to move backwards if required.
6. Press Esc to stop tracking and remove all highlights.

When reviewing the page, check for:

• A logical focus order, following the visual reading order of the page.
• Every interactive element receiving keyboard focus.
• Unexpected jumps between unrelated parts of the page.
• Controls that receive focus when they shouldn't, such as hidden or inactive elements.
• A clear sequence, making it easy to understand how keyboard users move through the interface.

Bookmarklet 10. Highlight tabindex

Highlights all elements that use the tabindex attribute. It distinguishes between:

• tabindex="0"
• tabindex="-1"
• positive tabindex values
• invalid tabindex values

This makes it easy to identify elements that have been added to the keyboard focus order and to spot values that may cause unexpected keyboard navigation.

Use this bookmarklet when you want to:

• identify elements that use the tabindex attribute
• inspect how keyboard focus has been managed
• find positive tabindex values
• identify invalid tabindex values

How to use it

1. Drag a bookmarklet to your browser's Bookmarks Bar.
2. Open the page you want to inspect.
3. Click the Highlight tabindex bookmarklet.
4. Scroll through the page to review the highlighted elements.
5. Press Esc to remove the overlay.

When reviewing the page, check for:

• Elements with tabindex="0", which participate in the normal keyboard focus order.
• Elements with tabindex="-1", which can receive programmatic focus but are skipped when tabbing through the page.
• Positive tabindex values, which create a custom focus order and should generally be avoided.
• Invalid tabindex values, which are not recognised by browsers.

« Back to home