@ieee-atiig/accessibility-menu

A fully customizable React accessibility menu component. Provides font scaling, reading aids, color adjustments, and more to help make your web app more accessible.

Features

• Font size adjustment
• Line height adjustment
• Text alignment control
• Reading aid (focus line overlay)
• Grayscale/desaturate mode
• High contrast mode (dark mode with high-visibility colors, handles canvas/WebGL, portals, and fixed elements)
• Dyslexia-friendly font toggle
• Big cursor toggle
• Stop animations toggle
• Read aloud (selection-based text-to-speech via Web Speech API, with chunking and voice selection)
• Persistent settings (localStorage)
• Fully configurable labels, colors, and positioning
• SSR / Next.js compatible
• No external CSS framework required — ships with bundled styles
• TypeScript type definitions included

Installation

npm install @ieee-atiig/accessibility-menu

Basic Usage

import { AccessibilityMenu } from "@ieee-atiig/accessibility-menu";

function App() {
  return (
    <>
      {/* Your app content */}
      <AccessibilityMenu />
    </>
  );
}

The component injects its own CSS at runtime — no additional imports needed.

Manual CSS Import (optional)

If you prefer to load styles statically:

import "@ieee-atiig/accessibility-menu/styles.css";

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialSettings | Partial<AccessibilitySettings> | {} | Initial settings overrides | | storageKey | string | "ieee-atiig-accessibility-menu-settings" | localStorage key for persistence | | position | "bottom-left" \| "bottom-right" | "bottom-left" | Menu position | | positionOffset | number \| { x: number, y: number } | 0 | Offset from edge in px | | labels | Partial<SectionLabels> | {} | Custom text labels | | className | string | "" | Additional class for root wrapper | | buttonClassName | string | "" | Additional class for the FAB | | panelClassName | string | "" | Additional class for the panel | | zIndex | Partial<ZIndexConfig> | {} | Z-index overrides for layers | | onSettingsChange | (settings) => void | — | Called when any setting changes | | onReset | () => void | — | Called when settings are reset | | showResetButton | boolean | true | Show/hide the reset button | | showFontSize | boolean | true | Show/hide font size control | | showLineHeight | boolean | true | Show/hide line height control | | showAlignment | boolean | true | Show/hide alignment control | | showReadingAid | boolean | true | Show/hide reading aid control | | showDesaturate | boolean | true | Show/hide desaturate toggle | | showDyslexicFont | boolean | true | Show/hide dyslexic font toggle | | showBigCursor | boolean | true | Show/hide big cursor toggle | | showStopAnimations | boolean | true | Show/hide stop animations toggle | | showHighContrast | boolean | true | Show/hide high contrast toggle | | showReadAloud | boolean | true | Show/hide read aloud controls | | speechLanguage | string | "en-US" | BCP-47 language code for speech synthesis | | speechRate | number | 1 | Speech rate (0.1–10) | | speechPitch | number | 1 | Speech pitch (0–2) | | speechVolume | number | 1 | Speech volume (0–1) | | theme | Partial<ThemeColors> | {} | Color theme customization | | ssr | boolean | false | Enable SSR-safe rendering |

Theming

<AccessibilityMenu
  theme={{
    primary: "#1a365d",
    accent: "#2b6cb0",
    gradientFrom: "#1a365d",
    gradientTo: "#2b6cb0",
  }}
/>

Custom Labels (i18n)

<AccessibilityMenu
  labels={{
    menuTitle: "Accessibilité",
    fontSize: "Taille de police",
    reset: "Réinitialiser",
    off: "Désactivé",
  }}
/>

High Contrast Mode

The high contrast mode applies a dark background with high-visibility colors across the entire host page. It handles:

• All HTML elements, pseudo-elements, and text
• Images, SVGs, and videos (contrast-enhanced filters)
• Canvas and WebGL content (grayscale + contrast filter)
• React portals rendered into document.body
• Fixed and absolutely positioned elements
• Form inputs, selects, textareas, and buttons

The accessibility menu itself is excluded from high contrast changes.

Read Aloud

The read aloud feature uses the Web Speech API to read selected text. Select text on the page, then click "Read Selected Text" to have it spoken aloud. Controls include pause, resume, and stop.

Long text selections are automatically split into manageable chunks and read sequentially.

Accessibility

• All controls are keyboard accessible
• aria-label applied to the menu button
• aria-pressed on toggle buttons
• Backdrop overlay dismiss on click
• Focus remains within the panel when open

Browser Support

• Chrome, Firefox, Safari, Edge (last 2 major versions)
• IE is not supported

License

MIT