Release Notes

Version 1.0.0 - Initial Release

Release Date: 11/19/2025 (November 11th, 2025)

Created by: AirforceRP

🎉 Overview

The Accessibility Widget is a comprehensive, lightweight, self-contained accessibility plugin that provides extensive customization options for websites. This initial release includes 20+ accessibility features designed to make websites more inclusive and accessible to all users.

✨ Key Features

Text & Display Customization

• Font Size Adjustment: 75%, 100%, 125%, 150%, or 200%
• Contrast Modes: Normal, High Contrast, or Dark Mode
• Line Height Control: Normal or Large spacing
• Letter Spacing: Normal or Wide spacing
• Font Family Options: Default, Sans Serif, Serif, or Monospace

Color & Vision Support

• Color Blindness Filters:
  • Protanopia (Red-Blind)
  • Deuteranopia (Green-Blind)
  • Tritanopia (Blue-Blind)
  • Achromatopsia (Total Color Blind)
• High Contrast Mode: Enhanced visibility for low vision users

Reading & Navigation Tools

• Text-to-Speech (TTS): Read selected text or entire page content
  • Adjustable speech rate (0.5x to 2.0x)
  • Adjustable pitch (0 to 2.0)
  • Adjustable volume (0 to 1.0)
  • Multiple voice support
• Reading Guide: Visual guide that follows your cursor
• Reading Mask: Hides text below reading position
• Text Highlight: Highlights text as you read
• Image Alt Text Display: Shows image descriptions

Accessibility Tools

• Enhanced Focus Indicator: High-contrast focus outlines for keyboard navigation
• Stop Animations: Disable all CSS animations and transitions
• Underline All Links: Make all links clearly visible
• Keyboard Navigation: Full keyboard support
• Persistent Settings: Remembers user preferences via localStorage

🚀 Installation

CDN Installation (Recommended)

<!-- Include Boxicons for icons (required) -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Include the CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css">
<!-- Include the config (optional - customize as needed) -->
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-config.js"></script>
<!-- Include the plugin (must be loaded last) -->
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script>

Manual Installation

1. Download the plugin files:

   • accessibility-plugin.js
   • accessibility-plugin.css
   • accessibility-config.js

2. Include in your HTML:

<!-- Include Boxicons for icons (required) -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<!-- Include the CSS -->
<link rel="stylesheet" href="path/to/accessibility-plugin.css">
<!-- Include the config (optional) -->
<script src="path/to/accessibility-config.js"></script>
<!-- Include the plugin (must be loaded last) -->
<script src="path/to/accessibility-plugin.js"></script>

📋 JavaScript API

The plugin exposes a global AccessibilityPlugin object for programmatic control:

// Toggle the panel
AccessibilityPlugin.toggle();
// Reset to default settings
AccessibilityPlugin.reset();
// Get current settings
const settings = AccessibilityPlugin.getSettings();
// Set font size programmatically
AccessibilityPlugin.setFontSize(150); // 75, 100, 125, 150, or 200
// Set contrast mode
AccessibilityPlugin.setContrast('high'); // 'normal', 'high', or 'dark'
// Set color blindness filter
AccessibilityPlugin.setColorBlindness('protanopia'); // 'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'
// Text-to-speech
AccessibilityPlugin.speak('Hello, this is text-to-speech');
AccessibilityPlugin.stopSpeaking();

⚙️ Configuration

Customize the plugin behavior by editing accessibility-config.js:

var AccessibilityConfig = {
 position: 'bottom-right', // 'bottom-left' or 'bottom-right'
 buttonText: 'Accessibility', // Text on the toggle button
 showReset: true, // Show reset button (true/false)
 fontSize: 100, // Default font size percentage
 contrast: 'normal', // 'normal', 'high', or 'dark'
 lineHeight: 'normal', // 'normal' or 'large'
 letterSpacing: 'normal', // 'normal' or 'wide'
 fontFamily: 'default', // 'default', 'sans-serif', 'serif', 'monospace'
 colorBlindness: 'none', // 'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'
 focusIndicator: false, // Enable focus indicator (true/false)
 readingGuide: false, // Enable reading guide (true/false)
 stopAnimations: false, // Stop animations (true/false)
 underlineLinks: false, // Underline all links (true/false)
 showImageAlt: false, // Show image alt text (true/false)
 ttsEnabled: false, // Enable text-to-speech (true/false)
 ttsRate: 1.0, // TTS speech rate (0.5 to 2.0)
 ttsPitch: 1.0, // TTS pitch (0 to 2.0)
 ttsVolume: 1.0 // TTS volume (0 to 1.0)
};

🌐 Browser Compatibility

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Opera GX (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

📦 File Structure

accessibility-plugin/
├── accessibility-plugin.js # Main plugin logic
├── accessibility-plugin.css # Plugin styles
├── accessibility-config.js # Configuration file
├── example.html # HTML example
├── example-php.php # PHP example
└── README.md # Documentation

🔧 Technical Details

• No Dependencies: Pure JavaScript and CSS
• Lightweight: Minimal performance impact
• Self-Contained: No server-side configuration required
• Responsive: Works on desktop and mobile devices
• Accessible: Follows WCAG guidelines
• Persistent: Settings saved in localStorage

🐛 Known Issues

• Color blindness filters may have slight performance impact on very large pages
• TTS requires browser support for Web Speech API (Chrome, Edge, Safari)
• Some older browsers may not support all features

📝 Notes

• Settings are saved in browser localStorage
• The plugin works on any HTML/PHP page without server-side requirements
• All styles are scoped to avoid conflicts with existing page styles
• The widget is hidden when printing (via CSS media queries)
• Color blindness filters use SVG filters

🤝 Support

For issues or questions:

• GitHub: https://github.com/airforcerp/Website-Accessibility-Widget
• Email: accessibility@airforcerp.com

📄 License

Free to use and modify for any purpose.

🙏 Credits

Created by AirforceRP

Changelog

Version 1.0.0 (11/19/2025)

Initial Release

• ✅ 20+ accessibility features
• ✅ Text-to-speech support
• ✅ Color blindness filters
• ✅ Reading tools (guide, mask, highlight)
• ✅ Full keyboard navigation
• ✅ Persistent settings
• ✅ JavaScript API
• ✅ Responsive design
• ✅ Mobile support
• ✅ WordPress compatible
• ✅ CDN support via jsDelivr
• ✅ Comprehensive documentation
• ✅ Example files (HTML & PHP)

Thank you for using the Accessibility Widget!

Making the web accessible for everyone, one website at a time. 🌐♿

Love,
AirforceRP