Skip to main content
← Back to Tutorials

Visual Overlays

Highlight violations, keyboard tab order, and focus gaps directly on the page.

Open Demo PageFollow along on the demo page while watching the video

Video coming soon

Follow the written steps below in the meantime

Step-by-Step Instructions

  1. 1
    Open the Visual Overlays demo and run a scan.
  2. 2
    In the action bar at the bottom, click ○ Violations — affected elements get red outlines on the page.
  3. 3
    Click ○ Tab Order — numbered blue badges appear on every focusable element showing keyboard navigation order.
  4. 4
    Click ○ Focus Gaps — elements that look interactive but lack keyboard access are highlighted in amber.
  5. 5
    Toggle each overlay off by clicking the same button again.
  6. 6
    The demo page has 8+ violations, 15+ tabbable elements, and 3 focus gaps (div/span acting as buttons without tabindex).
← All Tutorials