Accessibility Widget
Give every user control of their experience.
A plug-and-play floating widget that lets your site visitors tune accessibility settings: reduced motion, contrast, font size, focus indicators and more. Applied instantly, no reloads.
Built right
The right way to give users accessibility controls.
Built for end users
The widget is designed for people who use your product, not just developers. Every control is intuitive and clearly labeled.
Themeable
Match your product's look with custom colors and tab position: primary and tab colors, tab icon color, panel background, panel text, muted text, hover text, borders, and tab position.
CSS-driven effects
Reduced motion, contrast, focus, and typography are applied via data attributes and CSS custom properties, so preference changes take effect instantly without a full page reload.
Internationalizable
Pass a locale string and custom label map to render the widget in any language your app supports.
Persistent settings
Preferences are stored in localStorage and re-applied on every page load. No account required.
Keyboard & screen reader ready
The widget itself passes all WCAG 2.2 AA checks out of the box. Every control has correct ARIA roles.
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.
Controls
Nine controls, ready out of the box.
All controls are enabled by default. You can opt any of them out via the widget's config prop.
Reduced Motion
Pauses CSS animations and transitions site-wide.
High Contrast
Applies a higher-contrast color palette via CSS variables.
Focus Indicators
Forces visible :focus-visible outlines on all interactive elements.
Dyslexia-Friendly Font
Swaps the body typeface to Lexend for easier reading.
Font Size
Scales all rem-based sizes up or down via the html font-size (80–200%).
Letter Spacing
Increases letter-spacing globally (0–100%).
Word Spacing
Increases word-spacing globally (0–100%).
Line Height
Increases line-height globally (0–100%).
Color Vision
Simulate or compensate for color vision deficiency (protanopia, deuteranopia, tritanopia).
Quick Start
Drop it in anywhere.
import { AccessibilityWidget } from "@access-kit/react"
export function App() {
return (
<>
<main>Your content</main>
{/* Floats over your UI; use style to match your theme */}
<AccessibilityWidget
initialPosition="center-right"
style={{ primary: "var(--primary)" }}
/>
</>
)
}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