The AccessKit Dev Tool is a floating, tabbed panel you add during development to audit your app for accessibility issues. It runs automated checks against WCAG 2.0, 2.1, and 2.2 (Level A, AA, and AAA) using axe-core plus ~32 custom AccessKit rules, and shows results across three specialized tabs so you can find and fix problems before release.
The Dev Tool is intended for development only. Add it inside your layout or a dev-only branch (for example, guarded by process.env.NODE_ENV === "development"), so it is not included in production builds. End users get the accessibility Widget; developers use the Dev Tool to validate pages and components.
What it does
When the Dev Tool is mounted, a button appears on the screen (by default on the bottom-left). Open the panel to access three tabs:
- Issues — Runs a WCAG audit on the current page and reports failures and warnings with rule IDs, WCAG criteria, and guidance. Filter by severity, WCAG level, category, or free-text search. Each finding includes a “Fix with AI” option that copies a ready-made prompt to your clipboard.
- Keyboard — Interactive tab-order walkthrough that checks focus visibility, focus obscured (WCAG 2.4.11), focus appearance, and keyboard trap risk.
- Media — Inspects video, audio, and iframe embeds for captions, autoplay, and controls. Also checks live regions (
aria-live) for correct attributes.
When additional rule sets are enabled (e.g. TTv5, RGAAv4, Section 508), each finding displays badges showing which standards it belongs to, so you can see at a glance whether a finding comes from WCAG alone or from an additional standard. You can re-run the audit after making changes to confirm fixes.
Setup and configuration
Import AccessKitDevTools from @accesskit/react and render it anywhere inside AccessKitProvider — typically in your root layout or a dev-only wrapper. You can control whether the panel starts open, where the tab is placed, its stacking order, and which rule tags run in addition to the default WCAG set (for example, best-practice or Section 508).
For step-by-step setup, see Installation and Quick Start. For options such as routeKey, defaultOpen, position, zIndex, and additionalRules, see Configuration. For TypeScript types and the programmatic audit API, see the Dev Tool section under TypeScript.