Features

Features Overview

Complete list of all features available in the Accessibility Widget.

📋 Feature Categories

The Accessibility Widget includes 20+ accessibility features organized into the following categories:

1. Text & Display Customization
2. Color & Vision Support
3. Reading & Navigation Tools
4. Accessibility Tools
5. Developer Features

---

📝 Text & Display Customization

Font Size Adjustment

Description: Adjust the font size of all text on the page to make it easier to read.

Options:

• 75% (Small) - Compact text for users who prefer smaller fonts
• 100% (Normal) - Standard default size
• 125% (Large) - Slightly larger for easier reading
• 150% (Extra Large) - Significantly larger text
• 200% (Huge) - Maximum size for severe visual impairments

Use Cases:

• Users with visual impairments
• Users with reading difficulties
• Elderly users who need larger text
• Users with dyslexia

How to Use:

1. Click the Accessibility button
2. Open "Text & Display" section
3. Select desired font size from dropdown
4. Changes apply immediately

API:

AccessibilityPlugin.setFontSize(150); // Set to 150%

---

Contrast Modes

Description: Change the contrast between text and background for better visibility.

Options:

• Normal - Standard contrast (default)
• High Contrast - Enhanced contrast for low vision users
• Dark Mode - Dark background with light text to reduce eye strain

Use Cases:

• Users with low vision
• Users sensitive to bright screens
• Users who prefer dark themes
• Reducing eye strain in low-light conditions

How to Use:

1. Click the Accessibility button
2. Open "Text & Display" section
3. Select contrast mode from dropdown
4. Page updates immediately

API:

AccessibilityPlugin.setContrast('high'); // High contrast mode
AccessibilityPlugin.setContrast('dark');  // Dark mode

---

Line Height Control

Description: Adjust the vertical spacing between lines of text.

Options:

• Normal - Standard line spacing
• Large - Increased spacing between lines

Use Cases:

• Users with reading difficulties
• Users with dyslexia
• Easier tracking while reading
• Better readability for some users

How to Use:

1. Click the Accessibility button
2. Open "Text & Display" section
3. Select line height from dropdown

Benefits:

• Reduces visual crowding
• Makes text easier to follow
• Helps with reading comprehension

---

Letter Spacing

Description: Adjust the horizontal spacing between letters.

Options:

• Normal - Standard letter spacing
• Wide - Increased spacing between letters

Use Cases:

• Users with dyslexia
• Easier letter distinction
• Better readability for some users
• Reduced visual confusion

How to Use:

1. Click the Accessibility button
2. Open "Text & Display" section
3. Select letter spacing from dropdown

Benefits:

• Helps distinguish similar letters
• Reduces letter confusion
• Improves reading speed for some users

---

Font Family Options

Description: Change the font family used on the page.

Options:

• Default - Uses the website's default font
• Sans Serif - Clean, modern fonts (Arial, Helvetica)
• Serif - Traditional fonts (Times New Roman)
• Monospace - Fixed-width fonts (Courier)

Use Cases:

• Users who prefer specific font types
• Better readability for some users
• Dyslexia-friendly fonts (sans-serif)
• Code readability (monospace)

How to Use:

1. Click the Accessibility button
2. Open "Text & Display" section
3. Select font family from dropdown

Benefits:

• Some fonts are easier to read for certain users
• Sans-serif fonts are often preferred for dyslexia
• Monospace helps with code and technical content

---

🎨 Color & Vision Support

Color Blindness Filters

Description: Apply filters to simulate different types of color blindness, helping users see content as it appears to people with color vision deficiencies.

Options:

• None - No filter (default)
• Protanopia - Red-blind (red appears darker)
• Deuteranopia - Green-blind (green appears darker)
• Tritanopia - Blue-blind (blue-yellow color blindness)
• Achromatopsia - Total color blindness (grayscale)

Use Cases:

• Users with color blindness
• Testing website accessibility
• Understanding color-dependent content
• Ensuring information doesn't rely solely on color

How to Use:

1. Click the Accessibility button
2. Open "Color & Vision" section
3. Select color blindness filter from dropdown
4. Page updates in real-time

API:

AccessibilityPlugin.setColorBlindness('protanopia'); // Apply filter
AccessibilityPlugin.setColorBlindness('none');       // Remove filter

Important Notes:

• Filters use SVG filters (may have slight performance impact on very large pages)
• Widget remains visible when filters are applied
• Filters can be combined with other features

---

High Contrast Mode

Description: Increases contrast between text and background for better visibility.

Included in: Contrast Modes (see above)

Benefits:

• Essential for users with low vision
• Makes text more readable
• Improves visibility of UI elements
• Better for users with certain eye conditions

---

📖 Reading & Navigation Tools

Text-to-Speech (TTS)

Description: Read text aloud using browser's speech synthesis.

Features:

• Read selected text
• Read entire page (first 5000 characters)
• Adjustable speech rate (0.5x to 2.0x)
• Adjustable pitch (0 to 2.0)
• Adjustable volume (0 to 1.0)
• Multiple voice support (browser-dependent)
• Word-by-word highlighting as text is read

Use Cases:

• Users with reading difficulties
• Users with dyslexia
• Visual impairments
• Learning disabilities
• Multitasking (listen while doing other things)
• Language learning

How to Use:

1. Enable TTS in the accessibility panel
2. Select text on the page
3. Click "Read Selected Text" button
4. Or click "Read Selected Text" without selection to read entire page
5. Use "Stop Reading" to stop playback

Settings:

• Speech Rate: Control how fast text is read
• Pitch: Control voice pitch (higher/lower)
• Volume: Control playback volume
• Voice: Select from available voices (browser-dependent)

API:

AccessibilityPlugin.speak('Hello, this is text-to-speech');
AccessibilityPlugin.stopSpeaking();

Browser Support:

• ✅ Chrome/Edge: Full support with multiple voices
• ✅ Safari: Full support with native voices
• ⚠️ Firefox: Limited support (basic functionality)

---

Reading Guide

Description: A visual guide line that follows your cursor to help with reading tracking.

Features:

• Follows mouse cursor
• Customizable height
• Helps maintain reading position
• Reduces eye strain

Use Cases:

• Users with reading difficulties
• Users with attention disorders
• Tracking while reading long passages
• Reducing visual distractions

How to Use:

1. Click the Accessibility button
2. Enable "Reading Guide" toggle
3. Move mouse over text
4. Guide line follows cursor

Benefits:

• Helps maintain focus
• Reduces line-skipping
• Improves reading accuracy
• Less eye strain

---

Reading Mask

Description: Hides text below the reading position to reduce distractions.

Features:

• Hides text below current position
• Adjustable mask height (3 lines default)
• Follows reading position
• Reduces visual clutter

Use Cases:

• Users with attention disorders
• Reducing distractions while reading
• Focus on current reading position
• Users with ADHD

How to Use:

1. Click the Accessibility button
2. Enable "Reading Mask" toggle
3. Move mouse over text
4. Text below is masked

Benefits:

• Reduces distractions
• Improves focus
• Helps with reading comprehension
• Less overwhelming visual information

---

Text Highlight

Description: Highlights text as you read to show current reading position.

Features:

• Highlights text as you read
• Follows reading position
• Visual feedback
• Helps maintain focus

Use Cases:

• Users with reading difficulties
• Maintaining reading position
• Visual feedback while reading
• Users with attention disorders

How to Use:

1. Click the Accessibility button
2. Enable "Text Highlight" toggle
3. Text highlights as you read

Benefits:

• Visual reading aid
• Maintains reading position
• Improves focus
• Reduces confusion

---

Image Alt Text Display

Description: Shows image descriptions (alt text) when hovering over images.

Features:

• Displays alt text on hover
• Helps understand image content
• Accessible image descriptions
• Screen reader friendly

Use Cases:

• Users with visual impairments
• Understanding image content
• Accessibility compliance
• Better content understanding

How to Use:

1. Click the Accessibility button
2. Enable "Show Image Alt Text" toggle
3. Hover over images to see descriptions

Benefits:

• Better content understanding
• Accessibility compliance
• Helps users with visual impairments
• Improves overall accessibility

---

♿ Accessibility Tools

Enhanced Focus Indicator

Description: High-contrast focus outlines for keyboard navigation.

Features:

• High-contrast focus rings
• Clear visual indication
• Keyboard navigation support
• WCAG compliant

Use Cases:

• Keyboard-only users
• Users who don't use a mouse
• Better navigation visibility
• Accessibility compliance

How to Use:

1. Click the Accessibility button
2. Enable "Focus Indicator" toggle
3. Use Tab key to navigate
4. Focus indicators are clearly visible

Benefits:

• Essential for keyboard navigation
• WCAG compliance
• Better user experience
• Clear visual feedback

---

Stop Animations

Description: Disables all CSS animations and transitions.

Features:

• Stops all animations
• Stops all transitions
• Reduces motion
• Prevents motion sickness

Use Cases:

• Users with vestibular disorders
• Motion sensitivity
• Reducing distractions
• Preventing motion sickness

How to Use:

1. Click the Accessibility button
2. Enable "Stop Animations" toggle
3. All animations are disabled

Benefits:

• Reduces motion sickness
• Less distracting
• Better for sensitive users
• Accessibility compliance

---

Underline All Links

Description: Makes all links clearly visible with underlines.

Features:

• Underlines all links
• Makes links easily identifiable
• Better link visibility
• Accessibility compliance

Use Cases:

• Users with visual impairments
• Better link identification
• Accessibility compliance
• Clearer navigation

How to Use:

1. Click the Accessibility button
2. Enable "Underline Links" toggle
3. All links are underlined

Benefits:

• Better link visibility
• Easier navigation
• Accessibility compliance
• Clearer UI elements

---

Keyboard Navigation

Description: Full keyboard support for all features.

Features:

• Tab navigation
• Enter/Space to activate
• Escape to close
• Arrow key navigation
• Full keyboard accessibility

Use Cases:

• Keyboard-only users
• Users who don't use a mouse
• Accessibility compliance
• Better user experience

How to Use:

• Use Tab to navigate
• Enter/Space to activate buttons
• Escape to close panels
• Arrow keys for dropdowns

Benefits:

• Essential accessibility feature
• WCAG compliance
• Better user experience
• Works without mouse

---

Persistent Settings

Description: Remembers user preferences across sessions.

Features:

• Saves settings in localStorage
• Persists across page reloads
• Per-domain storage
• Automatic saving

Use Cases:

• User convenience
• Maintaining preferences
• Better user experience
• Personalization

How to Use:

• Settings are automatically saved
• Persist across browser sessions
• Per website/domain
• Can be reset via reset button

Benefits:

• User convenience
• Better user experience
• Personalization
• Saves time

---

🛠️ Developer Features

JavaScript API

Description: Programmatic control over all features.

Features:

• Toggle panel
• Reset settings
• Get current settings
• Set individual features
• Full programmatic control

API Methods:

• toggle() - Open/close panel
• reset() - Reset all settings
• getSettings() - Get current settings
• setFontSize(size) - Set font size
• setContrast(mode) - Set contrast
• setColorBlindness(type) - Set color filter
• speak(text) - Text-to-speech
• stopSpeaking() - Stop TTS

Use Cases:

• Custom integrations
• Programmatic control
• Custom UI controls
• Advanced implementations

Documentation: See API Documentation

---

Configuration File

Description: Customize default settings via config file.

Features:

• Set default values
• Customize widget position
• Customize button text
• Pre-configure features

Use Cases:

• Site-specific defaults
• Branding customization
• Pre-configured settings
• Better user experience

Documentation: See Configuration Guide

---

Customization

Description: Fully customizable appearance and behavior.

Features:

• Custom colors
• Custom positioning
• Custom styling
• Theme support

Use Cases:

• Branding
• Design consistency
• Custom themes
• Site integration

Documentation: See Customization Guide

---

📊 Feature Summary

Total Features: 20+

By Category:

• Text & Display: 5 features
• Color & Vision: 2 features
• Reading & Navigation: 5 features
• Accessibility Tools: 5 features
• Developer Features: 3+ features

Feature Highlights

• ✅ Zero Dependencies - Pure JavaScript and CSS
• ✅ Lightweight - Less than 50KB total
• ✅ Fast - Minimal performance impact
• ✅ Responsive - Works on all devices
• ✅ Accessible - WCAG 2.1 compliant
• ✅ Customizable - Fully customizable
• ✅ Persistent - Settings saved automatically
• ✅ Cross-Browser - Works on all modern browsers

---

🎯 Use Cases by User Type

Visual Impairments

• Font size adjustment
• High contrast mode
• Dark mode
• Text-to-speech
• Image alt text

Reading Difficulties

• Font size adjustment
• Line height control
• Letter spacing
• Reading guide
• Reading mask
• Text highlight
• Text-to-speech

Color Blindness

• Color blindness filters
• High contrast mode
• Underline links

Motor Disabilities

• Keyboard navigation
• Large click targets
• Focus indicators

Cognitive Disabilities

• Stop animations
• Reading tools
• Clear focus indicators
• Simplified interface

---

🔄 Feature Combinations

Recommended Combinations

For Low Vision:

• Font size: 150-200%
• High contrast mode
• Large line height
• Underline links
• Focus indicator

For Dyslexia:

• Font size: 125-150%
• Sans-serif font
• Large line height
• Wide letter spacing
• Reading guide

For Color Blindness:

• Appropriate color filter
• Underline links
• High contrast (optional)

For Reading Difficulties:

• Font size: 125-150%
• Large line height
• Reading guide or mask
• Text-to-speech

---

📚 Related Pages

• Installation Guide
• Configuration Guide
• API Documentation
• Browser Compatibility
• Troubleshooting

---

🆘 Feature Not Working?

• Check Troubleshooting guide
• Review Browser Compatibility
• See FAQ for common issues
• Check browser console for errors

---

Last Updated: November 2025

Total Features: 20+ accessibility features