@krunalshah/accessibility-widget

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

Features

$3

- 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

$3

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

$3

- 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

$3

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

$3

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

Installation

``bash
npm install @krunalshah/accessibility-widget
`

Automatic Updates with Dependabot

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

1. Create .github/dependabot.yml in your project:

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

2. Dependabot will automatically create PRs when new versions are published.

Usage

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

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


)
}
`

$3

Add the widget to your root layout:

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

export default function RootLayout({ children }) {
return (


{children}



)
}
`

$3

You can also use the accessibility settings hook independently:

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

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

return (



)
}
`

$3

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

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

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

return (
speak('Hello world!')}>
{isSpeaking ? 'Speaking...' : 'Speak'}

)
}
`

$3

Add keyboard shortcut support to your custom implementation:

`tsx
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


}
`

Customization

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

`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

$3

The main widget component. No props required.

$3

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

$3

Returns an object with:

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

$3

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

$3

`typescript
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