close

The complete platform for accessible applications.

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.

Get Started
npm install @access-kit/react

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

Three resources. One mission.

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

News, guides & accessibility trends.

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.

  • Guides on WCAG 2.2 & 3.0
  • Community-submitted case studies
  • Searchable pattern library

02 · Dev Tool

Catch a11y issues before they ship.

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).

  • Accessibility audits on the live DOM
  • Filter by severity, WCAG level & category
  • Fix guidance and docs for each issue
  • Render when you need it; use a conditional to tree-shake from production if you like

03 · Accessibility Widget

Give every user control of their experience.

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.

  • Reduced motion, contrast & focus indicators
  • Font size, text spacing & dyslexia-friendly font
  • Color vision modes (protanopia, deuteranopia, tritanopia)
  • Persistent preferences, themeable & brandable

Dev Tool

Audit in the browser. Fix in your editor.

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.

AccessKit DevTools
2 Errors2 Warnings
Scanning: /Scan status: UpdatedUpdated

Accessibility Widget

Give every user full control.

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

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.

01

Install the package

One dependency. Peer deps: React and React DOM.

02

Add the Provider

Wraps your app and exposes the accessibility context.

03

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.

04

Add the Widget

Floats over your UI. Users control their own experience.

bash
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/react

Works with

Next.jsRemixVite + ReactGatsbyAstro