@krunalshah/accessibility-widget

v1.1.5

Published

a month ago

Accessible, customizable accessibility widget for React applications

0High
0Medium
0Low

accessibility a11y react widget wcag dyslexia high-contrast screen-reader color-blindness text-to-speech keyboard-shortcuts focus-indicator

@krunalshah/accessibility-widget

A customizable accessibility widget for React applications. Provides comprehensive accessibility features with zero configuration required.

Features

Display Settings

Text Size: Adjustable text scaling (100%, 125%, 150%, 175%)
High Contrast: Enhanced color contrast for better visibility
Reduce Motion: Disable animations for motion-sensitive users
Big Cursor: Larger mouse cursor for easier tracking
Custom Focus: Enhanced focus indicators with customizable appearance

Vision Settings

Color Blindness Filters: Simulations for protanopia, deuteranopia, and tritanopia
Highlight Links: Make links more visible with outlines

Reading Settings

Line Height: Increase text spacing for readability
Dyslexia Font: OpenDyslexic font for dyslexic users (embedded, no setup needed)
Reading Guide: Horizontal line that follows the cursor
Text-to-Speech: Read selected text aloud with adjustable speech rate

Keyboard Shortcuts

Alt + A - Toggle accessibility panel
Alt + C - Toggle high contrast
Alt + M - Toggle reduce motion
Alt + R - Reset all settings

Accessibility

Full keyboard navigation support
Screen reader announcements for all setting changes
Focus trap in the settings panel
WCAG 2.1 AA compliant

Installation

npm install @krunalshah/accessibility-widget

Automatic Updates with Dependabot

To keep your accessibility widget up to date automatically, add Dependabot to your project:

Create .github/dependabot.yml in your project:

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      accessibility:
        patterns:
          - "@krunalshah/accessibility-widget"

Dependabot will automatically create PRs when new versions are published.

Usage

import { AccessibilityWidget } from '@krunalshah/accessibility-widget'
import '@krunalshah/accessibility-widget/styles'

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

Next.js

Add the widget to your root layout:

// app/layout.tsx
import { AccessibilityWidget } from '@krunalshah/accessibility-widget'
import '@krunalshah/accessibility-widget/styles'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AccessibilityWidget />
      </body>
    </html>
  )
}

Using the Hook

You can also use the accessibility settings hook independently:

import { useAccessibilitySettings } from '@krunalshah/accessibility-widget'

function MyComponent() {
  const {
    settings,
    toggleSetting,
    resetSettings,
    setColorBlindnessMode,
    updateFocusIndicator,
    setTTSRate,
  } = useAccessibilitySettings()

  return (
    <div>
      <p>High contrast: {settings.highContrast ? 'On' : 'Off'}</p>
      <button onClick={() => toggleSetting('highContrast')}>
        Toggle High Contrast
      </button>
    </div>
  )
}

Text-to-Speech Hook

Use the text-to-speech functionality in your own components:

import { useTextToSpeech } from '@krunalshah/accessibility-widget'

function MyComponent() {
  const { speak, stop, isSpeaking } = useTextToSpeech(true, 1.0)

  return (
    <button onClick={() => speak('Hello world!')}>
      {isSpeaking ? 'Speaking...' : 'Speak'}
    </button>
  )
}

Keyboard Shortcuts Hook

Add keyboard shortcut support to your custom implementation:

import {
  useAccessibilitySettings,
  useAccessibilityKeyboardShortcuts,
} from '@krunalshah/accessibility-widget'

function MyComponent() {
  const { toggleSetting, resetSettings } = useAccessibilitySettings()
  const [isPanelOpen, setIsPanelOpen] = useState(false)

  useAccessibilityKeyboardShortcuts(
    () => setIsPanelOpen((prev) => !prev),
    toggleSetting,
    resetSettings,
    true // enabled
  )

  return <div>{/* Your UI */}</div>
}

Customization

The widget uses CSS custom properties for theming. Override these in your CSS:

:root {
  --color-primary: #1E3A5F;
  --color-primary-dark: #152B47;
  --color-accent: #E5B94E;
  --color-white: #FFFFFF;
  --color-gray-100: #F0EDE8;
  --color-gray-200: #E0DBD3;
  --color-gray-300: #C4BCB0;
  --color-gray-500: #706860;
  --color-gray-600: #524B45;
  --color-gray-700: #3D3832;
  --color-gray-800: #2A2622;
}

API

AccessibilityWidget

The main widget component. No props required.

useAccessibilitySettings()

Returns an object with:

settings: Current accessibility settings
updateSetting(key, value): Update a specific setting
toggleSetting(key): Toggle a boolean setting
resetSettings(): Reset all settings to defaults
setColorBlindnessMode(mode): Set color blindness filter
updateFocusIndicator(updates): Update focus indicator settings
setTTSRate(rate): Set text-to-speech rate (0.5 to 2.0)
isLoaded: Whether settings have loaded from localStorage
announcement: Current screen reader announcement

useTextToSpeech(enabled, rate)

Returns an object with:

speak(text): Speak the given text
stop(): Stop speaking
pause(): Pause speech
resume(): Resume speech
isSpeaking: Whether currently speaking

useAccessibilityKeyboardShortcuts(togglePanel, toggleSetting, resetSettings, enabled)

Adds keyboard shortcut support (Alt+A, Alt+C, Alt+M, Alt+R).

AccessibilitySettings

interface AccessibilitySettings {
  // Display
  textSize: '100' | '125' | '150' | '175'
  highContrast: boolean
  reduceMotion: boolean
  bigCursor: boolean
  focusIndicator: {
    enabled: boolean
    thickness: '2px' | '4px' | '6px'
    color: string
    style: 'solid' | 'dashed' | 'dotted'
  }

  // Vision
  colorBlindnessMode: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia'
  highlightLinks: boolean

  // Reading
  lineHeight: boolean
  dyslexiaFont: boolean
  readingGuide: boolean
  ttsEnabled: boolean
  ttsRate: number // 0.5 to 2.0
}

Browser Support

Chrome/Edge 88+
Firefox 78+
Safari 14+

WCAG Compliance

This widget helps websites achieve WCAG 2.1 Level AA compliance by providing:

1.4.3 Contrast (Minimum): High contrast mode
1.4.4 Resize Text: Text size adjustment up to 175%
1.4.12 Text Spacing: Line height adjustment
2.1.1 Keyboard: Full keyboard accessibility
2.3.1 Three Flashes or Below Threshold: Reduce motion option
2.4.7 Focus Visible: Custom focus indicators

Standards Monitoring

This package includes automated monitoring of accessibility standards websites. A GitHub Action runs weekly to check for updates on:

W3C WAI (WCAG guidelines)
WebAIM (best practices)
A11y Project (community standards)

When changes are detected, an issue is automatically created to review potential updates.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@krunalshah/accessibility-widget

Features

Display Settings

Vision Settings

Reading Settings

Keyboard Shortcuts

Accessibility

Installation

Automatic Updates with Dependabot

Usage

Next.js

Using the Hook

Text-to-Speech Hook

Keyboard Shortcuts Hook

Customization

API

AccessibilityWidget

useAccessibilitySettings()

useTextToSpeech(enabled, rate)

useAccessibilityKeyboardShortcuts(togglePanel, toggleSetting, resetSettings, enabled)

AccessibilitySettings

Browser Support

WCAG Compliance

Standards Monitoring

License