The AccessKit Dev Tool is a floating panel you add during development to audit your app for accessibility issues. It runs automated checks against WCAG 2.x (Level A, AA, and AAA) and shows results in a panel 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 tab appears on the screen (by default on the right). Open the panel to run an audit on the current page. The tool reports failures and warnings with rule IDs, WCAG criteria, and guidance so you can fix contrast, focus, semantics, and other issues. 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.