Dev Tool
Catch accessibility issues before they ship.
A floating, tabbed devtools panel that scans your live DOM for accessibility issues. Run WCAG 2.0/2.1/2.2 audits by default using axe-core plus ~32 custom AccessKit rules across three tabs (Issues, Keyboard, Media), filter by severity, level, and category, get fix guidance and documentation links for every finding, and extend to other standards when you need them.
Why it matters
Designed for the way developers actually work.
Live DOM scanning
Run audits on the current page and re-scan as you navigate or after the DOM changes. Results stay in sync with what's on screen.
WCAG 2.0 / 2.1 / 2.2 by default
Every finding is tied to its WCAG success criterion and level (A, AA, AAA). Extend to Section 508, EN 301 549, and more via optional rules.
Selector + fix guidance
Each issue shows the offending element's CSS selector plus actionable fix guidance and a link to the rule's documentation.
Filter by severity, level & category
Narrow results by impact (error/warning), WCAG level, or rule category (Color, Forms, ARIA, Keyboard, etc.) so you can triage quickly.
Programmatic audits
Use the runAccessibilityAudit API to run audits from code with the same rules and tags, without opening the panel.
You control when it appears
Render the dev tool only when you need it (e.g. development or staging). Use a conditional so it's tree-shaken from production if you like.
Dev Tool
Audit in the browser. Fix in your editor.
Drop <AccessKitDevTools /> into your app root. It scans the live DOM for accessibility issues using axe-core plus ~32 custom AccessKit rules, and surfaces WCAG 2.0/2.1/2.2 findings across three tabs: Issues, Keyboard, and Media. Each finding includes rule, selector, impact, fix guidance, documentation links, and a Fix with AI option. Extend to other standards (e.g. Section 508, EN 301 549, ACT, TTv5, RGAAv4) when you need them.
Live DOM scanning
Run audits on the current page; re-scan as you navigate or after DOM changes.
Filter by severity, level, category & search
Narrow results by impact (error/warning), WCAG level (A/AA/AAA), rule category, or free-text search.
Fix guidance, documentation & Fix with AI
Each finding includes actionable guidance, a documentation link, and a Fix with AI prompt for the rule’s documentation.
You control when it appears
Render only in certain environments (e.g. development or staging) or leave it on; use a conditional to tree-shake it from production if you want.
Coverage
WCAG 2.0, 2.1 & 2.2: Level A, AA, and AAA.
axe-core rules plus ~32 custom AccessKit rules that fill gaps axe misses, covering criteria from WCAG 2.0 through 2.2. Opt in to Section 508, EN 301 549, ACT, TTv5, RGAAv4, and more.
Sample of covered criteria above. View full coverage and opt-in standards in the docs.
Integration
Up and running in minutes.
AccessKit is designed to disappear into your stack. Install the package, wrap your app in the provider, then add whichever pieces you need: the dev tool, the widget, or both.
Install the package
One dependency. Peer deps: React and React DOM.
Add the Provider
Wraps your app and exposes the accessibility context.
Drop in the Dev Tool
Render only when you need it (e.g. development or staging), or leave it on at all times. Use a conditional so it’s tree-shaken from production if you don’t want it there.
Add the Widget
Floats over your UI. Users control their own experience.
npm install @access-kit/react
# or with yarn
yarn add @access-kit/react
# or with pnpm
pnpm add @access-kit/react
# or with bun
bun add @access-kit/reactWorks with
Ready to start auditing?
Install AccessKit and add the dev tool to your layout. You'll have live accessibility feedback in under two minutes.