AccessKit

AccessKit is a React-based accessibility toolkit designed to support both developers and end users in creating and experiencing accessible web applications. It provides tools for running live accessibility audits within the browser and offers a floating widget that enables users to adjust key accessibility settings, all integrated into a single package.

For developers, AccessKit includes a floating devtools panel that scans the live DOM of an application to detect accessibility issues in real time. The tool identifies violations of WCAG 2.0, 2.1, and 2.2 standards by default, with the option to extend checks to other standards such as Section 508 and EN 301 549. Findings from the audit can be filtered by severity, WCAG level (A/AA/AAA), and category. Each issue is accompanied by actionable fix guidance and links to relevant documentation. The devtools panel is designed to be rendered conditionally, allowing teams to include it only in development or staging environments and exclude it from production builds to optimize performance and security.

End users benefit from a drop-in floating widget that offers granular control over accessibility preferences. The widget allows adjustments for reduced motion, high contrast, focus indicators, font size, letter spacing, word spacing, line height, and the use of a dyslexia-friendly font (Lexend). It also includes color vision modes to simulate or compensate for protanopia, deuteranopia, and tritanopia. User preferences are applied instantly and persist across sessions, with settings saved to localStorage. The widget is themeable and brandable, enabling customization to match the host application's design. It can function independently or alongside the developer audit tools, providing flexibility in deployment.

AccessKit is delivered as an npm package with a single dependency and minimal bundle size. Installation involves adding the package, wrapping the application in a provider, and selectively including the dev tool and/or widget components. The platform is designed for zero-configuration setup and supports integration with frameworks such as Next.js, Remix, Vite, Gatsby, and Astro. AccessKit aims to provide an end-to-end solution for accessibility, covering the needs of both those building web applications and those using them.