The AccessKit Widget is a floating panel your end users interact with to change how they experience your app. It appears as a tab on the screen; when opened, it shows controls for high contrast, reduced motion, focus indicators, text spacing, font size, dyslexia-friendly font, and color vision mode. Changes apply immediately and, when persistence is enabled, are saved so they carry over on the next visit.
The Widget is intended for production. Add it once inside your layout or shell (within AccessKitProvider) and it will be available on every page. Developers use the Dev Tool to audit the app; end users use the Widget to adjust their own preferences without leaving the site.
What users can control
From the Widget panel, users can turn options on or off and adjust sliders for typography. The provider applies these preferences to the document via attributes and CSS custom properties, so your app can respond to reduced motion, high contrast, enhanced focus, and spacing or font-size changes. You can theme the Widget to match your brand and choose where the tab appears (e.g. “bottom-right” or “center-right”). Users can drag the tab to reposition it.
Setup and configuration
Import AccessibilityWidget from @accesskit/react and render it anywhere inside AccessKitProvider—usually in your root layout or a shared shell. You can set the initial position of the tab, whether the panel starts open, the stacking order (z-index), and a style object so the Widget uses your colors and fits your design system.
For step-by-step setup, see Installation and Quick Start. For position, style, and other options, see Configuration. For theming the Widget and using the same preferences in your own CSS, see Theming.