AccessKit

Announcement

Introducing @access-kit/react v0.1.0

The first release of @access-kit/react, a React toolkit for accessibility auditing, user preference management, and a drop-in accessibility widget.

Leo Oliveira··4 min read

Today we're publishing the first version of @access-kit/react, a React toolkit that gives you three things in one package: a provider for managing user accessibility preferences, a floating widget that lets your users customize their experience, and a developer tool for running accessibility audits directly in the browser.

Why we built this

Accessibility tooling in React tends to fall into two camps: developer-facing audit tools that your users never see, and user-facing overlays that don't actually help developers fix their code. We wanted both in one package, with a shared provider that connects them.

The result is @access-kit/react. Install it, wrap your app in AccessKitProvider, and you immediately get a system for managing accessibility preferences (reduced motion, high contrast, enhanced focus indicators, text spacing, font size, dyslexia-friendly fonts, and color vision deficiency simulation) all persisted to localStorage and applied automatically on every page load. No accounts, no backend.

What's in v0.1.0

AccessKitProvider

The foundation of the toolkit. It stores user preferences and applies them globally via data attributes and injected styles on the html element. It works with any React framework; Next.js, Remix, Vite, whatever you're using.

Preferences include reduced motion, high contrast, enhanced focus rings, letter spacing, word spacing, line height, font size, a dyslexia-friendly font option, and color vision deficiency simulation (protanopia, deuteranopia, and tritanopia). All configurable, all persistent, all opt-in.

AccessibilityWidget

A floating button that opens a panel where your users can toggle every preference the provider supports. Drop it once in your layout and it's done. It's fully themeable. You can override the primary color, background, text, borders, and more to match your product. You can also control its position, z-index, and whether it starts open or closed.

This isn't an overlay that claims to fix your site. It's a preference panel that gives your users real control over how they experience your application.

AccessKitDevTools

A floating audit panel for development and staging. Click "Run audit" and it scans the current page against WCAG 2.0, 2.1, and 2.2 rules at levels A, AA, and AAA by default. Results show up in a filterable list, where you can filter by severity, WCAG level, or category (color, forms, ARIA, keyboard, structure, and more).

You can also opt into additional rule sets: Section 508, EN 301 549, ACT, Trusted Tester v5, RGAA v4, and industry best practices. Just pass them as props, fully typed with autocomplete.

Programmatic audits

If you don't want the UI, you can run audits programmatically with runAccessibilityAudit. It returns an array of findings you can assert on in tests, log to the console, or pipe into CI. Pair it with formatAuditFindingsForConsole for a human-readable summary.

useAccessKit hook

For custom UI, the useAccessKit hook gives you direct access to the current settings and functions to toggle, set, or reset them. Build your own preference panel, tie accessibility settings to your existing settings page, or react to user preferences in your components.

Getting started

Install the package:

bash
npm install @access-kit/react

Wrap your app with the provider and drop in the components you need:

jsx
import { AccessKitProvider, AccessibilityWidget, AccessKitDevTools } from "@access-kit/react"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AccessKitProvider>{children}
          <AccessibilityWidget />
          {process.env.NODE_ENV === "development" && <AccessKitDevTools />}
        </AccessKitProvider>
      </body>
    </html>
  )
}

That's it. Zero config, works out of the box.

Known bugs

Cross-browser tests have been done in Chrome, Firefox, Edge, and Safari. It was detected in Safari that the high contrast and Color Vision Deficiency filters fail to apply to the entirety of the page like it does for the other browsers. An GitHub issue has been created, and the solution will probably come soon in a patch release. In the meantime, the High Contrast and Color Vision settings in the Widget have been removed (on Safari only).

What's next

This is v0.1.0! The foundation! We have a lot planned: more testing to ensure product stability, better suggestions with code examples, more options for the accessibility widget, additional features for the Dev Tool, and much more. If you have ideas or run into issues, let us know on Discord at https://discord.gg/qb6mEN2D76.

The web should be accessible to everyone. We hope this makes it a little easier to get there.

Back to blog