AccessKitDevTools
Floating dev panel that runs accessibility audits on the current page. Provides three tabs: Issues (WCAG findings with severity, level, and fix guidance), Keyboard (interactive focus/tab-order inspection), and Media (video/audio/embed and live region checks). For development only; mount inside a dev-only branch (e.g. process.env.NODE_ENV === "development") so it is not shipped to production.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| routeKey | string | - | Yes | Current pathname from your router (e.g. Next.js usePathname(), React Router useLocation().pathname). Resets findings when the route changes. |
| defaultOpen | boolean | false | No | Whether the dev tools panel is open when the page loads. |
| position | AccessKitPosition | "bottom-left" | No | Where the dev tools tab is placed. One of "bottom-right", "center-right", "top-right", "bottom-left", "center-left", "top-left". |
| zIndex | number | 2147483641 | No | Stacking order for the tab and panel. Use a lower value than the widget's zIndex if you want the widget to stay on top. |
| additionalRules | AccessKitAdditionalRuleTag[] | - | No | Extra rule-set tags to run in addition to default WCAG A/AA/AAA (e.g. ["best-practice", "section508"] or category tags like "cat.color"). |