Add comprehensive documentation for Accessibility Widget features and usage
This commit is contained in:
sinanisler
@@ -0,0 +1,188 @@
|
|||||||
|
# Accessibility Widget
|
||||||
|
|
||||||
|
A comprehensive, lightweight accessibility tool that enhances web accessibility for all users. This single-file JavaScript widget provides multiple accessibility features to make websites more usable for people with disabilities.
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Download the `widget.js` file
|
||||||
|
2. Include it in your HTML page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="widget.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
That's it! The widget will automatically initialize when the page loads.
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
The widget is highly customizable through the `WIDGET_CONFIG` object at the top of the file. You can:
|
||||||
|
|
||||||
|
### Enable/Disable Features
|
||||||
|
```javascript
|
||||||
|
const WIDGET_CONFIG = {
|
||||||
|
// Feature toggles - set to false to disable
|
||||||
|
enableHighContrast: true,
|
||||||
|
enableBiggerText: true,
|
||||||
|
enableScreenReader: true,
|
||||||
|
enableVoiceControl: true,
|
||||||
|
// ... more features
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize Appearance
|
||||||
|
```javascript
|
||||||
|
const WIDGET_CONFIG = {
|
||||||
|
// Widget dimensions and position
|
||||||
|
widgetWidth: '440px',
|
||||||
|
widgetPosition: {
|
||||||
|
right: '20px',
|
||||||
|
bottom: '20px'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
colors: {
|
||||||
|
primary: '#1e90ff',
|
||||||
|
primaryHover: '#00bfff',
|
||||||
|
secondary: '#f9f9f9',
|
||||||
|
text: '#333',
|
||||||
|
// ... more colors
|
||||||
|
},
|
||||||
|
|
||||||
|
// Button styling
|
||||||
|
button: {
|
||||||
|
size: '55px',
|
||||||
|
borderRadius: '1000px',
|
||||||
|
iconSize: '28px'
|
||||||
|
},
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
typography: {
|
||||||
|
fontFamily: 'Arial, sans-serif',
|
||||||
|
fontSize: '16px',
|
||||||
|
titleFontSize: '22px'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Voice Commands
|
||||||
|
|
||||||
|
When voice control is enabled, users can activate features using these commands:
|
||||||
|
|
||||||
|
- "show menu" / "open menu" - Opens the accessibility menu
|
||||||
|
- "high contrast" - Toggles high contrast mode
|
||||||
|
- "bigger text" - Toggles larger text size
|
||||||
|
- "text spacing" - Toggles text spacing
|
||||||
|
- "pause animations" - Toggles animation pausing
|
||||||
|
- "hide images" - Toggles image hiding
|
||||||
|
- "dyslexia font" - Toggles dyslexia-friendly font
|
||||||
|
- "bigger cursor" - Toggles larger cursor
|
||||||
|
- "screen reader" - Toggles screen reader
|
||||||
|
- "reset all" - Resets all accessibility settings
|
||||||
|
|
||||||
|
## Browser Compatibility
|
||||||
|
|
||||||
|
- **Modern Browsers**: Full functionality in Chrome, Firefox, Safari, Edge
|
||||||
|
- **Screen Reader**: Requires Speech Synthesis API support
|
||||||
|
- **Voice Control**: Requires Speech Recognition API support
|
||||||
|
- **Graceful Degradation**: Features that aren't supported are automatically disabled
|
||||||
|
|
||||||
|
## Technical Features
|
||||||
|
|
||||||
|
- **Single File Deployment** - No dependencies, just include one JavaScript file
|
||||||
|
- **Persistent Settings** - User preferences saved in localStorage
|
||||||
|
- **Keyboard Navigation** - Full keyboard accessibility with Tab, Arrow keys, and Escape
|
||||||
|
- **ARIA Compliance** - Proper ARIA labels and roles for screen readers
|
||||||
|
- **Performance Optimized** - DOM caching and efficient event handling
|
||||||
|
- **Error Handling** - Robust error handling for browser compatibility
|
||||||
|
- **Responsive Design** - Works on desktop and mobile devices
|
||||||
|
|
||||||
|
## Usage Examples
|
||||||
|
|
||||||
|
### Basic Implementation
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My Accessible Website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome to My Website</h1>
|
||||||
|
<p>This site includes accessibility features.</p>
|
||||||
|
|
||||||
|
<!-- Include the widget -->
|
||||||
|
<script src="widget.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Configuration
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
// Customize before loading
|
||||||
|
const WIDGET_CONFIG = {
|
||||||
|
enableVoiceControl: false, // Disable voice control
|
||||||
|
widgetWidth: '300px', // Smaller menu width
|
||||||
|
colors: {
|
||||||
|
primary: '#0066cc', // Custom blue color
|
||||||
|
secondary: '#ffffff' // White background
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="widget.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Accessibility Standards
|
||||||
|
|
||||||
|
This widget helps websites comply with:
|
||||||
|
- **WCAG 2.1** (Web Content Accessibility Guidelines)
|
||||||
|
- **Section 508** (US Federal accessibility requirements)
|
||||||
|
- **ADA** (Americans with Disabilities Act) digital accessibility standards
|
||||||
|
|
||||||
|
## File Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
widget/
|
||||||
|
├── widget.js # Main accessibility widget file
|
||||||
|
├── index.html # Demo/test page
|
||||||
|
└── README.md # This documentation
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
When contributing to this project:
|
||||||
|
|
||||||
|
1. Test all features across different browsers
|
||||||
|
2. Ensure keyboard navigation works properly
|
||||||
|
3. Verify screen reader compatibility
|
||||||
|
4. Test voice commands (if supported by browser)
|
||||||
|
5. Check that settings persist across page reloads
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is open source and available under the MIT 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.
|
||||||
Reference in New Issue
Block a user