# Enablestack Widget [![npm version](https://badge.fury.io/js/enablestack-widget.svg)](https://www.npmjs.com/package/enablestack-widget) [![License: GPL](https://img.shields.io/badge/License-GPL-blue.svg)](https://opensource.org/licenses/GPL-3.0) [![](https://data.jsdelivr.com/v1/package/npm/enablestack-widget/badge)](https://www.jsdelivr.com/package/npm/enablestack-widget) **Enterprise Accessibility Infrastructure by [enableuser](https://www.enableuser.com)** A comprehensive, zero-dependency accessibility widget that enhances web accessibility for all users. This lightweight, single-file JavaScript solution provides 14+ accessibility features to make any website instantly more inclusive and compliant with WCAG 2.1 AA, Section 508, and EN 301 549 standards. > **Note**: This widget helps meet accessibility criteria but does not guarantee full compliance. Complete WCAG/Section 508 compliance requires proper HTML semantics, ARIA attributes, manual testing, and user validation. ## Supported Languages English, Deutsch, Espanol, Italiano, Francais, Russkiy, Turkce, al-Arabiyyah, Hindi, Simplified Chinese, Nihongo, Portugues, Bangla, Hangugeo, Tieng Viet, Bahasa Indonesia, Thai, Polski, Nederlands, Ellinika, Svenska, Norsk, Dansk, Suomi, Cestina, Magyar, Romana, Ivrit, Farsi, Urdu, Punjabi, Marathi, Telugu, Tamil, Bahasa Melayu, Filipino ## Quick Start ### CDN (one line — paste before ``) ```html ``` ### npm ```bash npm install enablestack-widget ``` ```javascript import 'enablestack-widget'; ``` ## Framework Usage ### React (Vite / CRA) ```jsx // App.jsx — import once at the root import 'enablestack-widget'; export default function App() { return

Your app here

; } ``` ### Next.js (App Router) Next.js server components don't run in the browser, so wrap the import in a client component: ```tsx // components/EnablestackWidget.tsx 'use client'; import 'enablestack-widget'; export default function EnablestackWidget() { return null; } ``` ```tsx // app/layout.tsx import EnablestackWidget from '@/components/EnablestackWidget'; export default function RootLayout({ children }) { return ( {children} ); } ``` ### Vue ```js // main.js import { createApp } from 'vue'; import App from './App.vue'; import 'enablestack-widget'; createApp(App).mount('#app'); ``` ### Vanilla HTML ```html ``` ## Key Features ### Visual Enhancements - **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 ### Cognitive Support - **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 ### Assistive Technology - **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 | Feature | WCAG Criteria | EU EN 301 549 | US Section 508 | |---------|---------------|---------------|----------------| | High Contrast Mode | 1.4.3, 1.4.6 | Yes | Yes | | Text Size Adjustment | 1.4.4 | Yes | Yes | | Text Spacing | 1.4.12 | Yes | Yes | | Line Height Adjustment | 1.4.12 | Yes | Yes | | Text Alignment | 1.4.8 | Yes | Yes | | Cursor Enhancement | 2.5.5 | Yes | Yes | | Pause Animations | 2.2.2, 2.3.3 | Yes | Yes | | Reduced Motion | 2.3.3 | Yes | Yes | | Hide Images | 1.1.1 | Yes | Yes | | Dyslexia-Friendly Font | 1.4.8 | Yes | Yes | | Screen Reader | 4.1.3 | Yes | Yes | | Voice Control | Browser API | Partial | Partial | | Color Filters | 1.4.1 | Yes | Yes | ## Installation Methods ### CDN ```html ``` ### npm ```bash npm install enablestack-widget ``` ```javascript // ES Module import 'enablestack-widget'; // CommonJS require('enablestack-widget'); ``` ### Direct Download 1. Download `widget.js` from [npm](https://www.npmjs.com/package/enablestack-widget) or [GitHub](https://github.com/enableuser/enablestack-widget) 2. Include in your HTML: ```html ``` ## Configuration ### Zero Configuration (works out of the box) ```html ``` ### Custom Configuration Define `window.ENABLESTACK_CONFIG` before loading the script: ```html ``` ### Full Configuration Options ```javascript window.ENABLESTACK_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: 'left', // 'left' or 'right' right: '20px', left: '20px', bottom: '20px' }, // ===== Colors ===== colors: { primary: '#330064', // 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 ===== voiceCommands: { en: { showMenu: ['show menu', 'open menu', 'accessibility menu'], highContrast: ['high contrast', 'contrast', 'dark mode'], biggerText: ['bigger text', 'large text', 'text size'], textSpacing: ['text spacing', 'spacing'], pauseAnimations: ['pause animations', 'stop animations'], hideImages: ['hide images', 'remove images'], dyslexiaFont: ['dyslexia friendly', 'dyslexia font'], biggerCursor: ['bigger cursor', 'large cursor'], lineHeight: ['line height', 'line spacing'], textAlign: ['align text', 'text align'], screenReader: ['screen reader', 'read aloud'], voiceControl: ['voice command', 'voice control'], resetAll: ['reset all', 'reset everything', 'clear all'] } } }; ``` ## Voice Commands When voice control is enabled (Chrome/Edge only): | 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 the `voiceCommands` configuration. ## Technical Highlights - **Zero Dependencies** - Pure vanilla JavaScript, no frameworks required - **SSR Safe** - Safely no-ops in Node.js/SSR environments (Next.js, Nuxt, etc.) - **Lightweight** - Single file, under 200KB - **Persistent Settings** - localStorage saves user preferences across sessions - **Keyboard Accessible** - Full Tab/Arrow key navigation with focus management - **ARIA Compliant** - Complete ARIA labels and roles - **Performance Optimized** - DOM caching, efficient event delegation, debounced updates - **Shadow DOM** - Widget styles are fully encapsulated, won't conflict with your site - **Responsive** - Works on desktop, tablet, and mobile - **35+ Languages** - Auto-detects browser language with full i18n support - **Auto-initialization** - Loads when DOM is ready, no setup code needed ## Browser Compatibility | Browser | Core Features | Screen Reader | Voice Control | |---------|---------------|---------------|---------------| | Chrome 90+ | Yes | Yes | Yes | | Edge 90+ | Yes | Yes | Yes | | Firefox 88+ | Yes | Yes | No | | Safari 14+ | Yes | Yes | No | | Opera 76+ | Yes | Yes | Yes | Voice Control requires Web Speech Recognition API (Chromium-based browsers only). ## Usage Examples ### Minimal HTML Page ```html My Accessible Website

Welcome

This site is fully accessible.

``` ### Custom Themed ```html Custom Theme

Custom Accessibility

``` ## License GPL-3.0 License - See [LICENSE](LICENSE) file for details. ## Author **[enableuser](https://www.enableuser.com)** - Enterprise Accessibility Infrastructure - Website: [enableuser.com](https://www.enableuser.com) - GitHub: [github.com/enableuser](https://github.com/enableuser) - npm: [npmjs.com/package/enablestack-widget](https://www.npmjs.com/package/enablestack-widget) --- **Built for a more accessible web by [enableuser](https://www.enableuser.com)**