Skip to content

Releases: AirforceRP/Website-Accessibility-Widget

v1.0.0

20 Nov 03:55
@YEET200 YEET200
Accessibility
6675235
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
v1.0.0 Latest
Latest

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:

📄 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

Assets 2
Loading