@itzsa/a11y-toolbar

Accessibility toolbar

Site preference panel for text size, contrast, spacing, motion, and related reading aids. Preferences persist in localStorage and apply via CSS under [data-a11y-content]. The floating control on this site is the live demo.

This toolbar does not make a broken page WCAG-compliant. Use semantic HTML, keyboard support, and sufficient contrast in your base UI.

Install

pnpm add @itzsa/a11y-toolbar

Usage

Attributes are set on <html>. Effects only run inside an SSR data-a11y-content wrapper — do not add that wrapper only after hydration or FOUC prevention will fail.

import { A11yToolbar } from "@itzsa/a11y-toolbar";
import { getA11yFoucScript } from "@itzsa/a11y-toolbar/headless";
import "@itzsa/a11y-toolbar/styles.css";

// 1. FOUC script in <head> (Server Component–safe import)
<script dangerouslySetInnerHTML={{ __html: getA11yFoucScript() }} />

// 2. SSR content root — required for FOUC + scoped effects
<main data-a11y-content>{children}</main>

// 3. Mount once from a Client Component, outside the content root
<A11yToolbar
  position="bottom-right"
  offset="1.25rem"
  launcherSize="3.5rem"
  theme={{
    accent: "var(--accent)",
    header: "var(--accent)",
    headerForeground: "var(--accent-fg)",
    launcher: "var(--accent)",
    launcherForeground: "#ffffff",
    launcherRing: "#ffffff",
    fontFamily: 'var(--font-outfit), "Outfit", system-ui, sans-serif',
  }}
/>

Defaults

Hotkey Alt+A opens the panel (ignored in form fields). Pass hotkey={null} to disable — document overrides if AT or extensions claim the combo.
Pause Animations is additive with prefers-reduced-motion.
Dyslexia Friendly is spacing-only in v1 (no bundled font).
Text Size uses content zoom so Tailwind utilities scale; Bigger Cursor uses a 32×32 SVG cursor.
Reading Guide (pointer band) and Highlight Links match Astral/Sienna assist features. Panel sections: Display, Motion & assist.
Configure position and theme (itzsa accent, Outfit font) so the toolbar tracks your brand tokens.

Try it

Use the floating accessibility button (bottom-right), or press Alt+A. Changes apply to this page's content immediately.