Refactor widget.js and README.md to remove Reading Mode and Enhanced Focus features, enhance internationalization support, and improve widget positioning options.

This commit is contained in:
sinanisler
2025-06-23 00:35:00 +03:00
parent df1567b447
commit 075affb90c
2 changed files with 155 additions and 101 deletions
+85 -6
View File
@@ -18,8 +18,6 @@ A comprehensive, lightweight accessibility tool that enhances web accessibility
### Advanced Features
- **Screen Reader Support** - Built-in text-to-speech functionality
- **Voice Control** - Voice commands to control accessibility features
- **Reading Mode** - Simplified, distraction-free reading experience
- **Enhanced Focus Indicators** - Improved visual focus indicators for keyboard navigation
- **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
@@ -86,8 +84,6 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
enableTextAlign: true,
enableScreenReader: true,
enableVoiceControl: true,
enableReadingMode: true,
enableEnhancedFocus: true,
enableReducedMotion: true,
enableFontSelection: true,
enableColorFilter: true,
@@ -95,8 +91,10 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
// Widget dimensions and position
widgetWidth: '440px',
widgetPosition: {
right: '20px',
bottom: '20px'
side: 'right', // 'left' or 'right' - which side to position widget
right: '20px', // distance from right edge when side is 'right'
left: '20px', // distance from left edge when side is 'left'
bottom: '20px' // distance from bottom
},
// Color scheme
@@ -146,6 +144,36 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
animation: {
transition: '0.2s',
hoverScale: '1.05'
},
// Language/Text Configuration - Customize all text strings
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',
reducedMotion: 'Reduced Motion',
fontSelection: 'Font Selection',
colorFilter: 'Color Filter',
textAlign: 'Text Align',
textSize: 'Text Size',
highContrast: 'High Contrast',
defaultFont: 'Default Font',
noFilter: 'No Filter',
default: 'Default',
close: 'Close',
screenReaderOn: 'Screen reader on',
screenReaderOff: 'Screen reader off',
voiceControlActivated: 'Voice control activated',
notSupportedBrowser: 'is not supported in this browser'
}
};
</script>
@@ -169,6 +197,42 @@ window.ACCESSIBILITY_WIDGET_CONFIG = {
<script src="widget.js"></script>
```
### Widget Positioning
The widget can be positioned on either side of the screen:
```html
<script>
window.ACCESSIBILITY_WIDGET_CONFIG = {
widgetPosition: {
side: 'left', // Position on left side of screen
left: '20px', // 20px from left edge
bottom: '20px' // 20px from bottom
}
};
</script>
```
### Internationalization (i18n)
The widget supports full internationalization. You can customize all text strings:
```html
<script>
// Spanish language example
window.ACCESSIBILITY_WIDGET_CONFIG = {
lang: {
accessibilityMenu: 'Menú de Accesibilidad',
accessibilityTools: 'Herramientas de Accesibilidad',
screenReader: 'Lector de Pantalla',
biggerText: 'Texto Más Grande',
highContrast: 'Alto Contraste',
resetAllSettings: 'Restablecer Todas las Configuraciones',
close: 'Cerrar'
// ... add more translations as needed
}
};
</script>
```
## Voice Commands
When voice control is enabled, users can activate features using these commands:
@@ -200,6 +264,10 @@ When voice control is enabled, users can activate features using these commands:
- **Performance Optimized** - DOM caching and efficient event handling
- **Error Handling** - Robust error handling for browser compatibility
- **Responsive Design** - Works on desktop and mobile devices
- **Flexible Positioning** - Support for left/right side positioning
- **Full Internationalization** - Complete text customization for any language
- **Configurable Colors** - Dynamic color theming including SVG icon colors
- **Screen Reader Optimized** - Proper text labels for all interactive elements
## Usage Examples
@@ -269,3 +337,14 @@ This project is open source and available under the GPL License.
## Support
For support or feature requests, please check the browser console for any error messages and ensure your browser supports the required APIs for advanced features like speech synthesis and recognition.
## Recent Changes
### Latest Updates
- **Widget Positioning**: Added support for left/right side positioning with configurable distances
- **Internationalization**: Full i18n support with customizable text strings for all languages
- **Color Theming**: SVG icons now use configurable primary color instead of hardcoded values
- **Screen Reader Improvements**: Fixed close button text to read properly ("Close" instead of "times")
- **Removed Features**: Removed Reading Mode and Enhanced Focus features for better performance
- **UI Improvements**: Updated header background to black, removed gradient from accessibility button
- **Configuration**: Enhanced configuration system with deep merging for partial overrides