Focus Order Visualization Tool

Instantly visualize keyboard navigation paths on any webpage

Get Started

Drag this button to your bookmarks bar:

Allyship.dev Focus Tracker

To install: Drag the "Focus Tracker" button to your bookmarks bar
Alternative method: Use the Copy button and create a new bookmark manually

WCAG Compliance

This tool helps ensure compliance with key WCAG 2.1 success criteria for keyboard navigation:

  • 2.1.1 Keyboard (Level A) - Verify all functionality is operable through keyboard navigation
  • 2.4.3 Focus Order (Level A) - Ensure focusable components receive focus in a meaningful sequence
  • 2.4.7 Focus Visible (Level AA) - Make keyboard focus indicator visible and clear for all interactive elements

Key Features

Real-time Visualization

See the exact path users will take when navigating with their keyboard

Scroll-aware Tracking

Works seamlessly with scrolled sections and dynamically loaded content

Dynamic DOM Monitoring

Automatically detects and visualizes new elements as they're added to the page

Accessibility Testing

Identify unreachable areas and improve keyboard navigation flows

How to Use

  1. Drag the bookmarklet to your browser's bookmark bar
  2. Visit any webpage you want to test
  3. Click the bookmarklet to activate the visualization
  4. Use Tab key to see the navigation order in action