docs: update feature count, add saturation control, and fix i18n example

This commit is contained in:
sinanisler
2026-06-15 21:57:20 +03:00
parent a5c23f1773
commit c3d80b59ce
+39 -21
View File
@@ -9,7 +9,7 @@
</a> </a>
<br><br> <br><br>
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 your website instantly more inclusive and compliant with WCAG 2.1 AA, Section 508, and EN 301 549 standards. A comprehensive, zero-dependency accessibility widget that enhances web accessibility for all users. This lightweight, single-file JavaScript solution provides 16+ accessibility features to make your website instantly more inclusive and compliant with WCAG 2.1 AA, Section 508, and EN 301 549 standards.
<br><br> <br><br>
> **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. > **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.
@@ -53,39 +53,41 @@ require('accessibility-widgets');
- **High Contrast Mode** - 3 levels (Medium 1.3x, High 1.5x, Ultra 2.0x) for improved visibility - **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) - **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 - **Line Height Adjustment** - 3 spacing levels (2em, 3em, 4em) for better readability
- **Text Spacing** - Enhanced letter (0.2em) and word spacing (0.3em) - **Text Spacing** - 3 levels (Light 0.1em/0.5em, Medium 0.15em/1em, Heavy 0.25em/2em letter/word spacing)
- **Text Alignment** - Left, Center, or Right alignment options - **Text Alignment** - Left, Center, or Right alignment options
- **Bigger Cursor** - High-contrast 48x72px cursor with SVG rendering - **Bigger Cursor** - High-contrast ~29×44px SVG cursor for better visibility
- **Hide Images** - Text-only mode for focused reading or bandwidth saving - **Hide Images** - Text-only mode for focused reading or bandwidth saving
- **Saturation Control** - 3 levels (Low 0.5x, High 10x, None/grayscale) for color intensity adjustment
### 🧠 Cognitive Support ### 🧠 Cognitive Support
- **Dyslexia-Friendly Font** - Comic Sans MS and other dyslexia-optimized fonts - **Dyslexia-Friendly Font** - Comic Sans MS and other dyslexia-optimized fonts
- **Font Selection** - Choose between Arial, Times New Roman, or Verdana - **Font Selection** - Choose between Arial, Times New Roman, or Verdana
- **Animation Control** - Pause all animations and transitions - **Animation Control** - Pause all animations, transitions, and reduced motion (bundled feature for vestibular disorders)
- **Reduced Motion** - Motion sensitivity support for vestibular disorders
### ♿ Assistive Technology ### ♿ Assistive Technology
- **Screen Reader** - Built-in text-to-speech using Web Speech API - **Screen Reader** - Built-in text-to-speech using Web Speech API
- **Voice Control** - Hands-free navigation with 15+ voice commands - **Voice Control** - Hands-free navigation with 16 voice commands
- **Color Blindness Filters** - Protanopia, Deuteranopia, Tritanopia, and Grayscale modes - **Color Blindness Filters** - Protanopia, Deuteranopia, Tritanopia, and Grayscale modes
- **Keyboard Navigation** - Full Tab/Arrow key support with proper focus indicators - **Keyboard Navigation** - Full Tab/Arrow key support with proper focus indicators
## 📊 Compliance & Standards ## 📊 Compliance & Standards
### WCAG 2.1 AA Coverage ### WCAG 2.1 AA & AAA Coverage
*Note: Some criteria below are AAA-level (1.4.6, 1.4.8, 2.3.3, 2.5.5). The core widget targets AA conformance.*
| Feature | WCAG Criteria | EU EN 301 549 | US Section 508 | | Feature | WCAG Criteria | EU EN 301 549 | US Section 508 |
|---------|---------------|---------------|----------------| |---------|---------------|---------------|----------------|
| High Contrast Mode | ✅ 1.4.3, 1.4.6 | ✅ | ✅ | | High Contrast Mode | ✅ 1.4.3, 1.4.6 (AAA) | ✅ | ✅ |
| Text Size Adjustment | ✅ 1.4.4 | ✅ | ✅ | | Text Size Adjustment | ✅ 1.4.4 | ✅ | ✅ |
| Text Spacing | ✅ 1.4.12 | ✅ | ✅ | | Text Spacing | ✅ 1.4.12 | ✅ | ✅ |
| Line Height Adjustment | ✅ 1.4.12 | ✅ | ✅ | | Line Height Adjustment | ✅ 1.4.12 | ✅ | ✅ |
| Text Alignment | ✅ 1.4.8 | ✅ | ✅ | | Text Alignment | ✅ 1.4.8 (AAA) | ✅ | ✅ |
| Cursor Enhancement | ✅ 2.5.5 | ✅ | ✅ | | Cursor Enhancement | ✅ 2.5.5 (AAA) | ✅ | ✅ |
| Pause Animations | ✅ 2.2.2, 2.3.3 | ✅ | ✅ | | Pause Animations | ✅ 2.2.2, 2.3.3 (AAA) | ✅ | ✅ |
| Reduced Motion | ✅ 2.3.3 | ✅ | ✅ | | Saturation Control | ✅ 1.4.1 | ✅ | ✅ |
| Hide Images | ✅ 1.1.1 | ✅ | ✅ | | Hide Images | ✅ 1.1.1 | ✅ | ✅ |
| Dyslexia-Friendly Font | ✅ 1.4.8 | ✅ | ✅ | | Dyslexia-Friendly Font | ✅ 1.4.8 (AAA) | ✅ | ✅ |
| Screen Reader | ✅ 4.1.3 | ✅ | ✅ | | Screen Reader | ✅ 4.1.3 | ✅ | ✅ |
| Voice Control | ⚠️ Browser API | ⚠️ | ⚠️ | | Voice Control | ⚠️ Browser API | ⚠️ | ⚠️ |
| Color Filters | ✅ 1.4.1 | ✅ | ✅ | | Color Filters | ✅ 1.4.1 | ✅ | ✅ |
@@ -313,10 +315,12 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
resetAllSettings: 'Restablecer Todo' resetAllSettings: 'Restablecer Todo'
}, },
voiceCommands: { voiceCommands: {
showMenu: ['mostrar menú', 'abrir menú'], es: {
highContrast: ['alto contraste'], showMenu: ['mostrar menú', 'abrir menú'],
biggerText: ['texto grande', 'texto más grande'], highContrast: ['alto contraste'],
resetAll: ['reiniciar todo'] biggerText: ['texto grande', 'texto más grande'],
resetAll: ['reiniciar todo']
}
} }
}; };
</script> </script>
@@ -338,7 +342,12 @@ When voice control is enabled (Chrome/Edge only), use these commands:
| "dyslexia font" | Activates dyslexia-friendly font | | "dyslexia font" | Activates dyslexia-friendly font |
| "bigger cursor" | Enlarges cursor | | "bigger cursor" | Enlarges cursor |
| "line height" | Adjusts line spacing | | "line height" | Adjusts line spacing |
| "text align" | Cycles text alignment (left/center/right) |
| "saturation" | Cycles saturation (low/high/none) |
| "font selection" / "change font" | Cycles font family |
| "color filter" | Cycles color blindness filters |
| "screen reader" | Activates text-to-speech | | "screen reader" | Activates text-to-speech |
| "voice command" / "voice control" | Toggles voice control on/off |
| "reset all" | Resets all settings | | "reset all" | Resets all settings |
*All commands are fully customizable via `voiceCommands` configuration*## 📚 Feature Details *All commands are fully customizable via `voiceCommands` configuration*## 📚 Feature Details
@@ -353,13 +362,16 @@ Three contrast enhancement levels:
Four size options (Default, Medium 20px, Large 24px, X-Large 28px) with smart widget exclusion to maintain UI consistency. Four size options (Default, Medium 20px, Large 24px, X-Large 28px) with smart widget exclusion to maintain UI consistency.
### Text Spacing ### Text Spacing
Enhanced letter spacing (0.2em) and word spacing (0.3em) for improved readability, especially helpful for dyslexia. Three spacing levels for improved readability, especially helpful for dyslexia:
- **Light**: letter-spacing 0.1em, word-spacing 0.5em
- **Medium**: letter-spacing 0.15em, word-spacing 1em
- **Heavy**: letter-spacing 0.25em, word-spacing 2em
### Line Height Adjustment ### Line Height Adjustment
Three spacing levels (2em, 3em, 4em) to reduce visual crowding and improve reading flow. Three spacing levels (2em, 3em, 4em) to reduce visual crowding and improve reading flow.
### Animation Control ### Animation Control
Completely disables CSS animations and transitions - critical for users with vestibular disorders or ADHD. Completely disables CSS animations and transitions (including `::before`/`::after` pseudo-elements). Also provides reduced motion support — critical for users with vestibular disorders or ADHD.
### Image Hiding ### Image Hiding
Text-only mode with smart caching (5-second intervals) to catch dynamically loaded images. Text-only mode with smart caching (5-second intervals) to catch dynamically loaded images.
@@ -368,17 +380,23 @@ Text-only mode with smart caching (5-second intervals) to catch dynamically load
Uses Comic Sans MS and fallback fonts optimized for dyslexia (Chalkboard SE, Bradley Hand, Brush Script MT). Uses Comic Sans MS and fallback fonts optimized for dyslexia (Chalkboard SE, Bradley Hand, Brush Script MT).
### Cursor Enhancement ### Cursor Enhancement
Custom 48x72px SVG cursor with high-contrast black fill and white stroke for better visibility. Custom ~29×44px SVG cursor with high-contrast black fill and white stroke for better visibility.
### Screen Reader (Text-to-Speech) ### Screen Reader (Text-to-Speech)
Built-in TTS using Web Speech API - reads focused element text, alt attributes, and titles. Built-in TTS using Web Speech API - reads focused element text, alt attributes, and titles.
### Voice Control ### Voice Control
Hands-free operation with Web Speech Recognition API. Supports 15+ customizable commands. Hands-free operation with Web Speech Recognition API. Supports 16 customizable commands.
### Color Blindness Filters ### Color Blindness Filters
SVG-based filters for Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Grayscale modes. SVG-based filters for Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Grayscale modes.
### Saturation Control
Three saturation levels for color intensity adjustment:
- **Low**: 0.5x saturation for reduced color intensity
- **High**: 10x saturation for boosted color vibrancy
- **None**: Full grayscale (desaturated) display
### Font Selection ### Font Selection
Cycle through Arial (modern sans-serif), Times New Roman (traditional serif), and Verdana (screen-optimized). Cycle through Arial (modern sans-serif), Times New Roman (traditional serif), and Verdana (screen-optimized).