diff --git a/README.md b/README.md
index 51d4cd7..e1852cb 100644
--- a/README.md
+++ b/README.md
@@ -301,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
}
};
@@ -340,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
@@ -362,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
diff --git a/widget.js b/widget.js
index 486cb27..c052526 100644
--- a/widget.js
+++ b/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:
+
+
+
+
===========================================
*/
\ No newline at end of file