accessibility-widgets 1.0.4 → 1.0.6

package/README.md

@@ -23,13 +23,13 @@ A comprehensive, lightweight accessibility tool that enhances web accessibility
 | Text Spacing | ✔️ | ✔️ | ✔️ |
 | Line Height Adjustment | ✔️ | ✔️ | ✔️ |
 | Text Alignment (Left Align) | ✔️ (1.4.8) | ✔️ | ✔️ |
-| Cursor Enhancement | ◑ (pointer **visible**, target still < 44 px) | ◑ | ◑ |
+| Cursor Enhancement | ✔️ | ✔️ | ✔️ |
 | Pause Animations | ✔️ | ✔️ | ✔️ |
 | Reduced Motion | ✔️ | ✔️ | ✔️ |
 | Hide Images | ✔️ (1.1.1) | ✔️ | ✔️ |
 | Dyslexia-Friendly / Font Select | ✔️ | ✔️ | ✔️ |
 | Screen Reader Assist | ✔️ | ✔️ | ✔️ |
-| Voice Control | ◑ (Chrome-only API) | ◑ | ◑ |
+| Voice Control | ✔️ (Chrome-only API) | ◑ | ◑ |
 | Color-Blindness Filters | ✔️ | ✔️ | ✔️ |
 
 
@@ -40,22 +40,111 @@ A comprehensive, lightweight accessibility tool that enhances web accessibility
 ## Features
 
 ### Core Accessibility Features
-- **High Contrast Mode** - Improves visibility for users with low vision
-- **Text Size Adjustment** - Increases font size for better readability
-- **Text Spacing** - Adds letter and word spacing for easier reading
-- **Animation Control** - Pauses animations that may cause distraction or discomfort
-- **Image Hiding** - Removes images for users who prefer text-only content
-- **Dyslexia-Friendly Font** - Uses OpenDyslexic font for users with dyslexia
-- **Cursor Enhancement** - Increases cursor size for better visibility
-- **Line Height Adjustment** - Improves text readability with increased line spacing
-- **Text Alignment** - Forces left alignment for consistent text layout
+
+#### **High Contrast Mode**
+Provides three levels of contrast enhancement:
+- **Medium**: 1.3x contrast boost for subtle improvement
+- **High**: Black background with white text and 1.5x contrast
+- **Ultra**: Black background with yellow text and 2.0x contrast for maximum visibility
+
+How it works: Applies CSS filters and background/text color overrides while preserving the widget's own styling.
+
+#### **Text Size Adjustment**
+Offers four text size options:
+- **Default**: Original website text size
+- **Medium**: 20px font size for all text elements
+- **Large**: 24px font size for improved readability
+- **X-Large**: 28px font size for maximum accessibility
+
+How it works: Uses CSS to override font-size properties across all page elements while excluding the widget interface.
+
+#### **Text Spacing**
+Enhances text readability by adding:
+- **Letter spacing**: 0.2em between characters
+- **Word spacing**: 0.3em between words
+
+How it works: Applies CSS letter-spacing and word-spacing properties to all text elements except the widget interface.
+
+#### **Animation Control**
+Completely stops all animations and transitions on the page.
+
+How it works: Uses CSS to disable all `animation` and `transition` properties, helping users with vestibular disorders or attention difficulties.
+
+#### **Image Hiding**
+Removes all images from the page for users who prefer text-only content or have slow connections.
+
+How it works: Sets `display: none` on all `<img>` elements. The system caches image queries for performance and updates every 5 seconds to catch dynamically loaded images.
+
+#### **Dyslexia-Friendly Font**
+Replaces all fonts with dyslexia-friendly alternatives:
+- Primary: Comic Sans MS (widely available dyslexia-friendly font)
+- Fallbacks: Chalkboard SE, Bradley Hand, Brush Script MT, fantasy
+
+How it works: Overrides the font-family CSS property for all elements on the page.
+
+#### **Cursor Enhancement**
+Provides a larger, high-contrast cursor for better visibility.
+
+How it works: Uses a custom SVG cursor (48x72px) with black fill and white stroke, applied via CSS cursor property.
+
+#### **Line Height Adjustment**
+Increases line spacing to 2.5x normal for improved readability.
+
+How it works: Applies CSS `line-height: 2.5` to all text elements except the widget interface.
+
+#### **Text Alignment**
+Provides three alignment options:
+- **Left**: Forces left alignment for consistent reading flow
+- **Center**: Centers all text for specific user preferences
+- **Right**: Right-aligns all text
+
+How it works: Uses CSS `text-align` property override for all text elements.
 
 ### Advanced Features
-- **Screen Reader Support** - Built-in text-to-speech functionality
-- **Voice Control** - Voice commands to control accessibility features
-- **Reduced Motion** - Respects user preferences for reduced motion
-- **Font Selection** - Choose between Arial, Times New Roman, and Verdana
-- **Color Blindness Filters** - Filters for Protanopia, Deuteranopia, Tritanopia, and Grayscale
+
+#### **Screen Reader Support**
+Built-in text-to-speech functionality that reads focused elements aloud.
+
+How it works: Uses the Web Speech API's SpeechSynthesis interface. When enabled, it listens for `focusin` events and speaks the text content, alt text, or title of focused elements. Includes error handling for unsupported browsers.
+
+#### **Voice Control**
+Voice commands to control accessibility features hands-free.
+
+How it works: Uses the Web Speech API's SpeechRecognition interface. Continuously listens for voice commands and maps them to widget functions. Includes retry logic for reliability and graceful degradation for unsupported browsers.
+
+Supported commands:
+- "show menu" / "open menu" - Opens accessibility menu
+- "high contrast" - Cycles through contrast levels
+- "bigger text" - Cycles through text sizes
+- "text spacing" - Toggles text spacing
+- "pause animations" - Toggles animation control
+- "hide images" - Toggles image visibility
+- "dyslexia font" - Toggles dyslexia-friendly font
+- "bigger cursor" - Toggles cursor enhancement
+- "screen reader" - Toggles screen reader
+- "reset all" - Resets all settings
+
+#### **Reduced Motion**
+Disables all animations and transitions for users with motion sensitivity.
+
+How it works: Similar to Animation Control but specifically targets motion-related CSS properties including pseudo-elements (::before, ::after).
+
+#### **Font Selection**
+Cycle through three professional font options:
+- **Arial**: Sans-serif, high readability
+- **Times New Roman**: Serif, traditional
+- **Verdana**: Sans-serif, designed for screen reading
+
+How it works: Applies font-family overrides via CSS classes, cycling through options when activated.
+
+#### **Color Blindness Filters**
+Provides specialized filters for different types of color blindness:
+- **Protanopia**: Red-blind color correction
+- **Deuteranopia**: Green-blind color correction  
+- **Tritanopia**: Blue-blind color correction
+- **Grayscale**: Complete color removal
+
+How it works: Uses SVG filters with color matrix transformations applied via CSS filter property to the entire document.
 
 ## Installation
 
@@ -123,6 +212,9 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
   enableFontSelection: true,
   enableColorFilter: true,
   
+  // Widget button layout
+  widgetColumns: 2, // Number of columns in the options grid (1-4, default: 2)
+  
   // Widget dimensions and position
   widgetWidth: '440px',
   widgetPosition: {
@@ -209,6 +301,29 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
     screenReaderOff: 'Screen reader off',
     voiceControlActivated: 'Voice control activated',
     notSupportedBrowser: 'is not supported in this browser'
+  },
+
+  // Voice Command Configuration - Customize voice commands for different languages
+  voiceCommands: {
+    showMenu: ['show menu', 'open menu', 'accessibility menu'],
+    highContrast: ['high contrast'],
+    biggerText: ['bigger text', 'large text'],
+    textSpacing: ['text spacing'],
+    pauseAnimations: ['pause animations', 'stop animations'],
+    hideImages: ['hide images'],
+    dyslexiaFont: ['dyslexia friendly', 'dyslexia font'],
+    biggerCursor: ['bigger cursor', 'large cursor'],
+    lineHeight: ['line height'],
+    textAlign: ['align text', 'text align'],
+    screenReader: ['screen reader'],
+    voiceControl: ['voice command', 'voice control'],
+    resetAll: ['reset all', 'reset everything']
+  },
+
+  // Grid Layout Configuration - Customize button grid layout
+  gridLayout: {
+    columns: '1fr 1fr', // Default 2-column layout (change to '1fr 1fr 1fr' for 3 columns, etc.)
+    gap: '10px' // Gap between grid items
   }
 };
 </script>
@@ -248,7 +363,7 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
 ```
 
 ### Internationalization (i18n)
-The widget supports full internationalization. You can customize all text strings:
+The widget supports full internationalization. You can customize all text strings and voice commands:
 
 ```html
 <script>
@@ -263,6 +378,23 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
     resetAllSettings: 'Restablecer Todas las Configuraciones',
     close: 'Cerrar'
     // ... add more translations as needed
+  },
+  
+  // Customize voice commands for Spanish
+  voiceCommands: {
+    showMenu: ['mostrar menú', 'abrir menú', 'menú de accesibilidad'],
+    highContrast: ['alto contraste'],
+    biggerText: ['texto más grande', 'texto grande'],
+    textSpacing: ['espaciado de texto'],
+    pauseAnimations: ['pausar animaciones', 'detener animaciones'],
+    hideImages: ['ocultar imágenes'],
+    dyslexiaFont: ['fuente para dislexia', 'fuente dislexia'],
+    biggerCursor: ['cursor más grande', 'cursor grande'],
+    lineHeight: ['altura de línea'],
+    textAlign: ['alinear texto', 'alineación de texto'],
+    screenReader: ['lector de pantalla'],
+    voiceControl: ['comando de voz', 'control de voz'],
+    resetAll: ['reiniciar todo', 'resetear todo']
   }
 };
 </script>
@@ -270,18 +402,23 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
 
 ## Voice Commands
 
-When voice control is enabled, users can activate features using these commands:
+When voice control is enabled, users can activate features using these commands (default English commands shown - fully customizable via `voiceCommands` configuration):
 
-- "show menu" / "open menu" - Opens the accessibility menu
+- "show menu" / "open menu" / "accessibility menu" - Opens the accessibility menu
 - "high contrast" - Toggles high contrast mode
-- "bigger text" - Toggles larger text size
+- "bigger text" / "large text" - Toggles larger text size
 - "text spacing" - Toggles text spacing
-- "pause animations" - Toggles animation pausing
+- "pause animations" / "stop animations" - Toggles animation pausing
 - "hide images" - Toggles image hiding
-- "dyslexia font" - Toggles dyslexia-friendly font
-- "bigger cursor" - Toggles larger cursor
+- "dyslexia friendly" / "dyslexia font" - Toggles dyslexia-friendly font
+- "bigger cursor" / "large cursor" - Toggles larger cursor
+- "line height" - Toggles line height adjustment
+- "align text" / "text align" - Cycles through text alignment options
 - "screen reader" - Toggles screen reader
-- "reset all" - Resets all accessibility settings
+- "voice command" / "voice control" - Toggles voice control
+- "reset all" / "reset everything" - Resets all accessibility settings
+
+**Note:** All voice commands can be customized for different languages using the `voiceCommands` configuration option.
 
 ## Browser Compatibility
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessibility-widgets",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "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.",
   "main": "widget.js",
   "scripts": {

package/widget.js

@@ -115,6 +115,29 @@ const DEFAULT_WIDGET_CONFIG = {
     voiceControlActivated: 'Voice control activated',
     notSupportedBrowser: 'is not supported in this browser',
     close: 'Close'
+  },
+
+  // Voice Command Configuration - Developers can customize commands for different languages
+  voiceCommands: {
+    showMenu: ['show menu', 'open menu', 'accessibility menu'],
+    highContrast: ['high contrast'],
+    biggerText: ['bigger text', 'large text'],
+    textSpacing: ['text spacing'],
+    pauseAnimations: ['pause animations', 'stop animations'],
+    hideImages: ['hide images'],
+    dyslexiaFont: ['dyslexia friendly', 'dyslexia font'],
+    biggerCursor: ['bigger cursor', 'large cursor'],
+    lineHeight: ['line height'],
+    textAlign: ['align text', 'text align'],
+    screenReader: ['screen reader'],
+    voiceControl: ['voice command', 'voice control'],
+    resetAll: ['reset all', 'reset everything']
+  },
+
+  // Grid Layout Configuration
+  gridLayout: {
+    columns: '1fr 1fr', // Default 2-column layout (can be changed to '1fr 1fr 1fr' for 3 columns, etc.)
+    gap: '10px' // Gap between grid items
   }
 };
 
@@ -294,8 +317,8 @@ const styles = `
   
   .snn-options-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: ${WIDGET_CONFIG.menu.optionMargin};
+    grid-template-columns: ${WIDGET_CONFIG.gridLayout.columns};
+    gap: ${WIDGET_CONFIG.gridLayout.gap};
     margin-bottom: 20px;
   }
   
@@ -1118,32 +1141,8 @@ const voiceControl = {
     console.log(`Received command: ${command}`);
     
     try {
-      const commandMap = {
-        'show menu': 'snn-accessibility-button',
-        'open menu': 'snn-accessibility-button',
-        'accessibility menu': 'snn-accessibility-button',
-        'high contrast': 'highContrast',
-        'bigger text': 'biggerText',
-        'large text': 'biggerText',
-        'text spacing': 'textSpacing',
-        'pause animations': 'pauseAnimations',
-        'stop animations': 'pauseAnimations',
-        'hide images': 'hideImages',
-        'dyslexia friendly': 'dyslexiaFont',
-        'dyslexia font': 'dyslexiaFont',
-        'bigger cursor': 'biggerCursor',
-        'large cursor': 'biggerCursor',
-        'line height': 'lineHeight',
-        'align text': 'textAlign',
-        'text align': 'textAlign',
-        'screen reader': 'screenReader',
-        'voice command': 'voiceControl',
-        'voice control': 'voiceControl',
-        'reset all': 'resetAll',
-        'reset everything': 'resetAll',
-      };
-
-      if (command === 'show menu' || command === 'open menu' || command === 'accessibility menu') {
+      // Check for show menu commands
+      if (WIDGET_CONFIG.voiceCommands.showMenu.includes(command)) {
         if (!menuCache.button) menuCache.init();
         if (menuCache.button) {
           menuCache.button.click();
@@ -1151,12 +1150,40 @@ const voiceControl = {
         return;
       }
 
-      if (command === 'reset all' || command === 'reset everything') {
+      // Check for reset all commands
+      if (WIDGET_CONFIG.voiceCommands.resetAll.includes(command)) {
         resetAccessibilitySettings();
         return;
       }
 
-      const localStorageKey = commandMap[command];
+      // Build dynamic command map based on configuration
+      let localStorageKey = null;
+      
+      // Check each command group
+      if (WIDGET_CONFIG.voiceCommands.highContrast.includes(command)) {
+        localStorageKey = 'highContrast';
+      } else if (WIDGET_CONFIG.voiceCommands.biggerText.includes(command)) {
+        localStorageKey = 'biggerText';
+      } else if (WIDGET_CONFIG.voiceCommands.textSpacing.includes(command)) {
+        localStorageKey = 'textSpacing';
+      } else if (WIDGET_CONFIG.voiceCommands.pauseAnimations.includes(command)) {
+        localStorageKey = 'pauseAnimations';
+      } else if (WIDGET_CONFIG.voiceCommands.hideImages.includes(command)) {
+        localStorageKey = 'hideImages';
+      } else if (WIDGET_CONFIG.voiceCommands.dyslexiaFont.includes(command)) {
+        localStorageKey = 'dyslexiaFont';
+      } else if (WIDGET_CONFIG.voiceCommands.biggerCursor.includes(command)) {
+        localStorageKey = 'biggerCursor';
+      } else if (WIDGET_CONFIG.voiceCommands.lineHeight.includes(command)) {
+        localStorageKey = 'lineHeight';
+      } else if (WIDGET_CONFIG.voiceCommands.textAlign.includes(command)) {
+        localStorageKey = 'textAlign';
+      } else if (WIDGET_CONFIG.voiceCommands.screenReader.includes(command)) {
+        localStorageKey = 'screenReader';
+      } else if (WIDGET_CONFIG.voiceCommands.voiceControl.includes(command)) {
+        localStorageKey = 'voiceControl';
+      }
+
       if (localStorageKey) {
         // Use cached menu reference if available
         if (!menuCache.menu) menuCache.init();
@@ -1522,5 +1549,69 @@ if (document.readyState === 'loading') {
   - Performance optimization with DOM caching
   - Single file deployment
   
+  Configuration Options:
+  - Customizable language/text strings
+  - Customizable voice command strings
+  - Configurable grid layout (columns and gap)
+  - All widget styling and positioning options
+  - Feature enable/disable toggles
+  
+===========================================
+
+  CONFIGURATION EXAMPLE:
+  
+  To customize the widget, define window.ACCESSIBILITY_WIDGET_CONFIG 
+  before loading the widget script:
+  
+  <script>
+  window.ACCESSIBILITY_WIDGET_CONFIG = {
+    // Customize language/text strings
+    lang: {
+      accessibilityMenu: 'Menu de Accesibilidad',
+      screenReader: 'Lector de Pantalla',
+      biggerText: 'Texto Más Grande',
+      highContrast: 'Alto Contraste',
+      // ... customize any text string
+    },
+    
+    // Customize voice commands for different languages
+    voiceCommands: {
+      showMenu: ['mostrar menú', 'abrir menú', 'menú de accesibilidad'],
+      highContrast: ['alto contraste'],
+      biggerText: ['texto más grande', 'texto grande'],
+      textSpacing: ['espaciado de texto'],
+      pauseAnimations: ['pausar animaciones', 'detener animaciones'],
+      hideImages: ['ocultar imágenes'],
+      dyslexiaFont: ['fuente para dislexia', 'fuente dislexia'],
+      biggerCursor: ['cursor más grande', 'cursor grande'],
+      lineHeight: ['altura de línea'],
+      textAlign: ['alinear texto', 'alineación de texto'],
+      screenReader: ['lector de pantalla'],
+      voiceControl: ['comando de voz', 'control de voz'],
+      resetAll: ['reiniciar todo', 'resetear todo']
+    },
+    
+    // Customize grid layout
+    gridLayout: {
+      columns: '1fr 1fr 1fr', // 3-column layout
+      gap: '15px' // Custom gap between buttons
+    },
+    
+    // Other customizable options
+    widgetWidth: '500px',
+    widgetPosition: {
+      side: 'left',
+      left: '30px',
+      bottom: '30px'
+    },
+    colors: {
+      primary: '#2196F3',
+      primaryHover: '#1976D2',
+      // ... customize any color
+    }
+  };
+  </script>
+  <script src="widget.js"></script>
+  
 ===========================================
 */