A comprehensive, lightweight accessibility widget that enhances web accessibility for all users. Provides multiple accessibility features including screen reader support, voice control, high contrast mode, and more.
npm install accessibility-widgetshtml
`
Or install via NPM:
`bash
npm install accessibility-widgets
`
`javascript
// Import in your project
import 'accessibility-widgets';
// or
require('accessibility-widgets');
`
✨ Key Features
$3
- High Contrast Mode - 3 levels (Medium 1.3x, High 1.5x, Ultra 2.0x) for improved visibility
- Text Size Control - 4 size options (Default, Medium 20px, Large 24px, X-Large 28px)
- Line Height Adjustment - 3 spacing levels (2em, 3em, 4em) for better readability
- Text Spacing - Enhanced letter (0.2em) and word spacing (0.3em)
- Text Alignment - Left, Center, or Right alignment options
- Bigger Cursor - High-contrast 48x72px cursor with SVG rendering
- Hide Images - Text-only mode for focused reading or bandwidth saving
$3
- Dyslexia-Friendly Font - Comic Sans MS and other dyslexia-optimized fonts
- Font Selection - Choose between Arial, Times New Roman, or Verdana
- Animation Control - Pause all animations and transitions
- Reduced Motion - Motion sensitivity support for vestibular disorders
$3
- Screen Reader - Built-in text-to-speech using Web Speech API
- Voice Control - Hands-free navigation with 15+ voice commands
- Color Blindness Filters - Protanopia, Deuteranopia, Tritanopia, and Grayscale modes
- Keyboard Navigation - Full Tab/Arrow key support with proper focus indicators
📊 Compliance & Standards
$3
| Feature | WCAG Criteria | EU EN 301 549 | US Section 508 |
|---------|---------------|---------------|----------------|
| High Contrast Mode | ✅ 1.4.3, 1.4.6 | ✅ | ✅ |
| Text Size Adjustment | ✅ 1.4.4 | ✅ | ✅ |
| Text Spacing | ✅ 1.4.12 | ✅ | ✅ |
| Line Height Adjustment | ✅ 1.4.12 | ✅ | ✅ |
| Text Alignment | ✅ 1.4.8 | ✅ | ✅ |
| Cursor Enhancement | ✅ 2.5.5 | ✅ | ✅ |
| Pause Animations | ✅ 2.2.2, 2.3.3 | ✅ | ✅ |
| Reduced Motion | ✅ 2.3.3 | ✅ | ✅ |
| Hide Images | ✅ 1.1.1 | ✅ | ✅ |
| Dyslexia-Friendly Font | ✅ 1.4.8 | ✅ | ✅ |
| Screen Reader | ✅ 4.1.3 | ✅ | ✅ |
| Voice Control | ⚠️ Browser API | ⚠️ | ⚠️ |
| Color Filters | ✅ 1.4.1 | ✅ | ✅ |
🎯 Installation Methods
$3
`html
`
$3
`bash
npm install accessibility-widgets
`
`javascript
// ES6 Import
import 'accessibility-widgets/widget.js';
// CommonJS
require('accessibility-widgets/widget.js');
`
$3
1. Download widget.js
2. Include in your HTML:
`html
`
⚙️ Configuration
$3
The widget works out of the box with zero configuration:
`html
`
$3
Customize the widget by defining window.ACCESSIBILITY_WIDGET_CONFIG before loading the script:
`html
`
$3
`javascript
window.ACCESSIBILITY_WIDGET_CONFIG = {
// ===== Core Feature Toggles =====
enableHighContrast: true, // 3-level high contrast mode
enableBiggerText: true, // 4-level text size control
enableTextSpacing: true, // 3-level text spacing
enablePauseAnimations: true, // Pause animations & reduced motion
enableHideImages: true, // Hide images toggle
enableDyslexiaFont: true, // Dyslexia-friendly fonts
enableBiggerCursor: true, // Large cursor
enableLineHeight: true, // 3-level line height (2em, 3em, 4em)
enableTextAlign: true, // Text alignment (left, center, right)
// ===== Advanced Features =====
enableScreenReader: true, // Built-in text-to-speech
enableVoiceControl: true, // Voice command control
enableFontSelection: true, // Font family selection
enableColorFilter: true, // Color blindness filters
// ===== Widget Layout =====
widgetWidth: '440px',
// ===== Grid Configuration =====
gridLayout: {
columns: '1fr 1fr', // Default 2-column grid
gap: '10px' // Gap between grid items
},
// ===== Position =====
widgetPosition: {
side: 'right', // 'left' or 'right'
right: '20px',
left: '20px',
bottom: '20px'
},
// ===== Colors =====
colors: {
primary: '#1663d7', // Header bg, main button, active borders
secondary: '#ffffff', // Main button icon, header text
optionBg: '#ffffff', // Option button background
optionText: '#333333', // Option button text
optionIcon: '#000000' // Option button icons
},
// ===== Button Styling =====
button: {
size: '55px',
borderRadius: '100px',
iconSize: '40px',
shadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
},
// ===== Menu Styling =====
menu: {
headerHeight: '70px',
padding: '0 10px 10px 10px',
optionPadding: '20px 10px',
optionMargin: '10px',
borderRadius: '8px',
fontSize: '16px',
titleFontSize: '16px',
closeButtonSize: '44px'
},
// ===== Typography =====
typography: {
fontFamily: 'Arial, sans-serif',
fontSize: '17px',
titleFontSize: '22px',
titleFontWeight: '700',
lineHeight: '1'
},
// ===== Animation =====
animation: {
transition: '0.2s',
hoverScale: '1.05'
},
// ===== Internationalization (i18n) =====
lang: {
accessibilityMenu: 'Accessibility Menu',
closeAccessibilityMenu: 'Close Accessibility Menu',
accessibilityTools: 'Accessibility Tools',
resetAllSettings: 'Reset All Settings',
screenReader: 'Screen Reader',
voiceCommand: 'Voice Command',
textSpacing: 'Text Spacing',
pauseAnimations: 'Pause Animations',
hideImages: 'Hide Images',
dyslexiaFriendly: 'Dyslexia Friendly',
biggerCursor: 'Bigger Cursor',
lineHeight: 'Line Height',
fontSelection: 'Font Selection',
colorFilter: 'Color Filter',
textAlign: 'Text Align',
textSize: 'Text Size',
highContrast: 'High Contrast',
defaultFont: 'Default Font',
noFilter: 'No Filter',
default: 'Default',
screenReaderOn: 'Screen reader on',
screenReaderOff: 'Screen reader off',
voiceControlActivated: 'Voice control activated',
notSupportedBrowser: 'is not supported in this browser',
close: 'Close',
reset: 'Reset',
saturation: 'Saturation',
selectLanguage: 'Select Language'
},
// ===== Voice Commands (Multi-language Support) =====
voiceCommands: {
en: {
showMenu: ['show menu', 'open menu', 'accessibility menu', 'access menu'],
highContrast: ['high contrast', 'contrast', 'dark mode', 'increase contrast'],
biggerText: ['bigger text', 'large text', 'text size', 'increase text', 'bigger', 'larger text', 'text bigger', 'make text bigger', 'enlarge text'],
textSpacing: ['text spacing', 'spacing', 'letter spacing', 'text space'],
pauseAnimations: ['pause animations', 'stop animations', 'disable animations', 'no animations'],
hideImages: ['hide images', 'remove images', 'no images'],
dyslexiaFont: ['dyslexia friendly', 'dyslexia font', 'readable font', 'easy font'],
biggerCursor: ['bigger cursor', 'large cursor', 'cursor size', 'big cursor'],
lineHeight: ['line height', 'line spacing', 'space between lines', 'line space'],
textAlign: ['align text', 'text align', 'center text', 'alignment'],
screenReader: ['screen reader', 'read aloud', 'voice reader'],
voiceControl: ['voice command', 'voice control', 'voice commands'],
resetAll: ['reset all', 'reset everything', 'clear all', 'reset settings', 'reset']
},
// Additional languages: de, es, it, fr, ru, tr, ar, hi, zh-cn, jp available in widget
}
};
`
🌍 Internationalization (i18n)
Full multilingual support - customize all text and voice commands:
$3
`html
`
🎤 Voice Commands
When voice control is enabled (Chrome/Edge only), use these commands:
| Command | Action |
|---------|--------|
| "show menu" / "open menu" | Opens accessibility menu |
| "high contrast" | Toggles contrast mode |
| "bigger text" / "large text" | Increases text size |
| "text spacing" | Toggles text spacing |
| "pause animations" | Stops all animations |
| "hide images" | Removes images |
| "dyslexia font" | Activates dyslexia-friendly font |
| "bigger cursor" | Enlarges cursor |
| "line height" | Adjusts line spacing |
| "screen reader" | Activates text-to-speech |
| "reset all" | Resets all settings |
All commands are fully customizable via voiceCommands configuration## 📚 Feature Details
$3
Three contrast enhancement levels:
- Medium: 1.3x boost for subtle improvement
- High: Black background + white text + 1.5x contrast
- Ultra: Black background + yellow text + 2.0x contrast
$3
Four size options (Default, Medium 20px, Large 24px, X-Large 28px) with smart widget exclusion to maintain UI consistency.
$3
Enhanced letter spacing (0.2em) and word spacing (0.3em) for improved readability, especially helpful for dyslexia.
$3
Three spacing levels (2em, 3em, 4em) to reduce visual crowding and improve reading flow.
$3
Completely disables CSS animations and transitions - critical for users with vestibular disorders or ADHD.
$3
Text-only mode with smart caching (5-second intervals) to catch dynamically loaded images.
$3
Uses Comic Sans MS and fallback fonts optimized for dyslexia (Chalkboard SE, Bradley Hand, Brush Script MT).
$3
Custom 48x72px SVG cursor with high-contrast black fill and white stroke for better visibility.
$3
Built-in TTS using Web Speech API - reads focused element text, alt attributes, and titles.
$3
Hands-free operation with Web Speech Recognition API. Supports 15+ customizable commands.
$3
SVG-based filters for Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Grayscale modes.
$3
Cycle through Arial (modern sans-serif), Times New Roman (traditional serif), and Verdana (screen-optimized).
🚀 Technical Features
- ✅ Zero Dependencies - Pure vanilla JavaScript, no frameworks required
- ✅ Lightweight - Single file, ~1900 lines minified
- ✅ Persistent Settings - localStorage saves user preferences across sessions
- ✅ Keyboard Accessible - Full Tab/Arrow key navigation with proper focus management
- ✅ ARIA Compliant - Complete ARIA labels and roles for assistive technologies
- ✅ Performance Optimized - DOM caching, efficient event delegation, debounced updates
- ✅ Error Handling - Graceful degradation for unsupported browser APIs
- ✅ Responsive Design - Works seamlessly on desktop, tablet, and mobile
- ✅ Flexible Positioning - Left or right side placement with custom offsets
- ✅ Full i18n Support - Complete text customization for any language
- ✅ Dynamic Theming - Customizable colors with SVG icon color synchronization
- ✅ Auto-initialization - Automatically loads when DOM is ready
🌐 Browser Compatibility
| Browser | Core Features | Screen Reader | Voice Control |
|---------|---------------|---------------|---------------|
| Chrome 90+ | ✅ | ✅ | ✅ |
| Edge 90+ | ✅ | ✅ | ✅ |
| Firefox 88+ | ✅ | ✅ | ❌ |
| Safari 14+ | ✅ | ✅ | ❌ |
| Opera 76+ | ✅ | ✅ | ✅ |
Note: Voice Control requires Web Speech Recognition API (Chromium-based browsers only). Screen Reader requires Web Speech Synthesis API.
💡 Usage Examples
$3
`html
My Accessible Website
Welcome
This site is fully accessible.
`
$3
`html
Custom Accessible Site
Custom Configuration
`
🤝 Contributing
Contributions are welcome! Please:
1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature`)