Accessibility widget for React

What you get

@accesspath/react gives a React app the same floating accessibility panel the vanilla script embed provides: 9 preset profiles (Low Vision, Dyslexia, Seizure Safe, Motor Impaired, Color Blind, ADHD, Voice Over, Elderly, Cognitive & Learning) and 30+ individual controls across vision, text, motion, reading, and navigation. All of it is a real change applied to your live DOM — not a static preview.

Install

npm install @accesspath/react @accesspath/core

Use the component and the hook

import { useRef } from 'react';
import { AccessPathPanel, useAccessPath } from '@accesspath/react';
import type { AccessPathPanelHandle } from '@accesspath/react';
import '@accesspath/core/styles/a11y-effects.css';
import '@accesspath/core/styles/panel.css';

export function App() {
  const panelRef = useRef<AccessPathPanelHandle>(null);
  const { prefs, activeProfiles } = useAccessPath('accesspath-prefs');

  return (
    <div>
      <button onClick={() => panelRef.current?.open()}>Accessibility</button>
      <AccessPathPanel ref={panelRef} storageKey="accesspath-prefs" />
    </div>
  );
}

useAccessPath(storageKey) returns { open, close, reset, prefs, activeProfiles, isOpen }. activeProfiles is an array — more than one profile can be active at once.

Props

Prop	Purpose
container	Element the a11y-* effect classes are applied to. Defaults to document.body.
isDarkTheme	Render the panel chrome in its dark style.
storageKey	localStorage key for persisted preferences. Share it to share state across components.
profiles	Restrict which preset profile cards render.
brandColor, locale, labels, sections, controlCategories, actions, reportUrl	Theming, translation, and which parts of the panel appear.

The built-in Accessibility Checker (an in-browser WCAG scan) is a developer diagnostic, so it's not in the default section set. Pass sections={['profiles','quick','controls','actions','audit']} to include it — handy on a dev build, off in production.

Next.js and SSR

The panel touches window and document, so render it on the client: put it under a "use client" boundary, or in a component loaded with next/dynamic and { ssr: false }. It makes no network calls during render and has no server dependencies.

What it is not

AccessPath is a user-controlled presentation layer. It does not audit your components, rewrite your JSX, add missing labels, or make your app WCAG-conformant on its own. Keep doing the underlying work — semantic elements, focus order, ARIA, color contrast — and let AccessPath sit on top of it. See the Accessibility Guide for an honest breakdown.

Free and self-hosted

MIT licensed, published on npm, no per-visitor pricing, no hosted script phoning home. Preferences are stored only in the visitor's browser. Full setup for every framework is in the Integration Guide; the source is on GitHub.

FAQ

Does @accesspath/react work with Next.js?

Yes. The panel is a client component, so render it under a "use client" boundary (or in a client-only wrapper). It has no server dependencies and makes no network calls during render.

Is it a replacement for accessible JSX?

No. AccessPath is a user-facing control layer for text size, contrast, motion, and similar presentation preferences. Semantic elements, labels, focus management, and ARIA on your own components are still your responsibility.

How much does it add to my bundle?

The panel UI and state live in @accesspath/core, loaded once. It is ESM and tree-shakeable, and you can lazy-load the component so it is only fetched when a user opens the panel.

Can two components share the accessibility state?

Yes. Any component using the same storageKey shares one state instance, so a header button and a mounted panel stay in sync with no context or prop plumbing.