Accessibility Toolkit

A reusable React accessibility toolbar with text-to-speech, voice navigation, font scaling, high contrast, reduced motion, and color vision deficiency simulation.

Installation

npm install @anthropic-test/accessibility-toolkit

Peer Dependencies

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

Quick Start

import { AccessibilityToolbar, SkipToContent } from '@anthropic-test/accessibility-toolkit';
import '@anthropic-test/accessibility-toolkit/styles.css';

function App() {
    const [theme, setTheme] = useState('light');

    return (
        <>
            <SkipToContent />
            <div id="main-content">
                {/* Your app content */}
            </div>
            <AccessibilityToolbar
                themeMode={theme}
                onThemeToggle={setTheme}
            />
        </>
    );
}

Components

AccessibilityToolbar

The main toolbar component. All features are enabled by default.

<AccessibilityToolbar
    // Theme
    themeMode="light"                    // 'light' | 'dark'
    onThemeToggle={(mode) => {}}         // Called with new mode

    // Feature flags — disable what you don't need
    features={{
        darkMode: true,
        textToSpeech: true,
        voiceNavigation: true,
        fontScaling: true,
        highContrast: true,
        reducedMotion: true,
        colorVision: true,
    }}

    // Voice navigation
    voiceCommands={[
        { phrases: ['go home', 'dashboard'], route: '/home' },
        { phrases: ['settings'], route: '/settings' },
    ]}
    navigateFn={navigate}                // e.g. react-router's useNavigate()
    voiceLang="en-IN"                    // Speech recognition language

    // Text-to-speech
    ttsLang="en-IN"                      // TTS language
    contentElementId="main-content"      // Element ID for "Read page"

    // Customization
    fabColor="#2B2E8C"                   // FAB button color
    position={{ bottom: 80, right: 20 }} // Toolbar position
/>

SkipToContent

A keyboard-accessible skip link for screen reader users.

<SkipToContent
    targetId="main-content"              // ID of the main content element
    label="Skip to main content"         // Link text
    bgColor="#2B2E8C"                    // Focus background color
/>

Hooks

All hooks can be used independently without the toolbar.

useAccessibility

Font scaling, high contrast, reduced motion, and color vision preferences. Persists to localStorage.

import { useAccessibility } from '@anthropic-test/accessibility-toolkit';

const {
    fontSize,              // Current font size percentage (80-150)
    highContrast,          // boolean
    reducedMotion,         // boolean
    colorVisionMode,       // 'normal' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia'
    increaseFontSize,
    decreaseFontSize,
    resetFontSize,
    toggleHighContrast,
    toggleReducedMotion,
    setColorVisionMode,
    cycleColorVisionMode,
    colorVisionModes,      // Array of available modes
} = useAccessibility();

useTextToSpeech

Web Speech API wrapper for text-to-speech.

import { useTextToSpeech } from '@anthropic-test/accessibility-toolkit';

const {
    speak,                 // (text, options?) => void
    speakSelectedText,     // Reads currently selected text
    speakPageContent,      // Reads main content area
    stop,
    pause,
    resume,
    isSpeaking,
    isPaused,
    isSupported,
    hoverToRead,           // boolean
    toggleHoverToRead,
} = useTextToSpeech({ contentElementId: 'main-content', lang: 'en-IN' });

useVoiceNavigation

Speech recognition for voice-controlled navigation.

import { useVoiceNavigation } from '@anthropic-test/accessibility-toolkit';

const {
    isListening,
    isSupported,
    transcript,
    feedback,
    toggleListening,
    startListening,
    stopListening,
    availableCommands,
} = useVoiceNavigation({
    commands: [
        { phrases: ['go home', 'dashboard'], route: '/home' },
    ],
    navigateFn: navigate,
    lang: 'en-IN',
});

CSS

Import the required CSS for high contrast, reduced motion, and color vision filters:

import '@anthropic-test/accessibility-toolkit/styles.css';

Or include it in your HTML:

<link rel="stylesheet" href="node_modules/@anthropic-test/accessibility-toolkit/dist/styles.css" />

Font Scaling

The font scaling feature changes document.documentElement.style.fontSize. This only affects rem-based font sizes. Ensure your app uses rem units for font sizes to benefit from this feature.

Browser Support

• Text-to-Speech: Chrome, Edge, Safari, Firefox
• Voice Navigation: Chrome, Edge (uses Web Speech Recognition API)
• All other features: All modern browsers

License

MIT