Focus Styles Validation Tool

Instantly check if all interactive elements have visible focus indicators

Get Started

Drag this button to your bookmarks bar:

Show Focus Styles

To install: Drag the "Focus Style Bookmarklet" 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:

  • 2.4.7 Focus Visible (Level AA) - Ensure keyboard focus indicator is visible
  • 2.1.1 Keyboard (Level A) - Verify all functionality is operable through keyboard
  • 1.4.11 Non-text Contrast (Level AA) - Validate focus indicators meet contrast requirements

Key Features

Focus Detection

Highlights elements missing visible focus indicators

Contrast Analysis

Checks if focus indicators meet WCAG contrast requirements

Interactive Element Scan

Identifies all keyboard-focusable elements on the page

Focus Order Report

Shows the tab order and highlights any navigation issues

How to Use

  1. Drag the bookmarklet to your browser's bookmark bar
  2. Visit any webpage you want to analyze
  3. Click the bookmarklet to check focus indicators
  4. Use Tab key to navigate and review highlighted focus issues