Run accessibility audits in the browser with a floating audit panel, and ship a floating widget so users can tune motion, contrast, focus, typography, and color vision, all with one React toolkit.
WCAG 2.2
A/AA/AAA by default; extend with other standards
Live audits
Scan any page, get immediate results
~80 KB
Gzipped bundle size: one dependency, no extras
Zero config
Plug-and-play, works straight out of the box
The Platform
AccessKit is an end-to-end accessibility toolkit covering every stakeholder: the developer writing the code, and the human using the product.
01 · Landing & Blog
Stay ahead of WCAG updates, browser changes, and industry trends with a curated blog. From beginner tutorials to deep dives into ARIA patterns, written by practitioners for practitioners.
02 · Dev Tool
A floating, tabbed devtools panel that scans your live DOM for accessibility issues. Find WCAG 2.0/2.1/2.2 violations using axe-core plus ~32 custom AccessKit rules, filter by severity, level, and category, and get fix guidance plus documentation links for every finding. Extend to other standards (e.g. Section 508, EN 301 549, ACT, TTv5, RGAAv4).
03 · Accessibility Widget
A drop-in floating widget so visitors can tune reduced motion, high contrast, focus indicators, dyslexia-friendly font, font size, text spacing, and color vision modes. Settings apply instantly and persist across sessions.
Dev Tool
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.
Accessibility Widget
A plug-and-play floating widget, themeable to match your brand, that lets visitors control reduced motion, high contrast, focus indicators, dyslexia-friendly font (Lexend), font size, letter/word/line spacing, and color vision modes (protanopia, deuteranopia, tritanopia). Settings apply instantly and persist across sessions.
Plug-and-play
One component, zero configuration required to get started.
Motion, contrast, focus, typography & color vision
Toggles and sliders for the settings users care about; all applied via AccessKit context and CSS.
Persistent & themeable
Preferences saved to localStorage; override colors, position, and styling to match your product.
Standalone or with Dev Tool
Use the widget alone for end-users, or pair it with the dev tool for the full developer experience.
Integration
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
Blog
AccessKit v0.2.0 introduces a custom rule engine with 30 detection rules that go beyond axe-core, a fully redesigned tabbed DevTools panel with dedicated Keyboard and Media tabs, visual bounding-box overlays on offending elements, and expanded coverage for WCAG 2.2 success criteria, including accessible authentication, focus obscured detection, and dragging movement alternatives.
Leo Oliveira
Jul 25, 2026 · 8 min read
The first release of @access-kit/react, a React toolkit for accessibility auditing, user preference management, and a drop-in accessibility widget.
Leo Oliveira · Mar 25, 2026