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
~45 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 devtools panel that scans your live DOM for accessibility issues. Find WCAG 2.0/2.1/2.2 violations, filter by severity and level, and get fix guidance plus documentation links for every finding. Extend to other standards (e.g. Section 508, EN 301 549).
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 and surfaces WCAG 2.0/2.1/2.2 findings by default with rule, selector, and impact, plus fix guidance and documentation links for each issue. Extend to other standards (e.g. Section 508, EN 301 549) 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
Narrow results by impact (error/warning), WCAG level (A/AA/AAA), or rule category.
Fix guidance & documentation
Each finding includes actionable guidance and a link to 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
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 · 4 min read
