@airforcerp/accessibility-widget
v1.0.4
Published
A comprehensive, lightweight accessibility plugin that provides extensive customization options including text-to-speech, color blindness filters, and many other accessibility features. WCAG 2.2 Level AA Compliant.
Downloads
460
Maintainers
yeet200Readme
Accessibility Widget by AirforceRP
A comprehensive, lightweight, WCAG 2.1 Level AA compliant accessibility plugin that provides extensive customization options including text-to-speech, color blindness filters, and many other accessibility features.
📦 Installation
npm
npm install @airforcerp/accessibility-widgetyarn
yarn add @airforcerp/accessibility-widgetpnpm
pnpm add @airforcerp/accessibility-widget🚀 Quick Start
Option 1: Using jsDelivr CDN (Recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Accessible Website</title>
<!-- Boxicons (Required) -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
<!-- Accessibility Plugin CSS -->
<link href="https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-plugin.css" rel="stylesheet">
</head>
<body>
<h1>Welcome to My Website</h1>
<!-- TTS Module for Multi-Language Support (Optional but Recommended) -->
<script src="https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/tts.js"></script>
<!-- Optional: Custom Configuration -->
<script>
var AccessibilityConfig = {
position: 'bottom-right',
buttonText: 'Accessibility',
fontSize: 100,
contrast: 'normal',
ttsLanguage: 'en' // en, es, de, fr, zh, ko, no
};
</script>
<!-- Accessibility Plugin JavaScript (Must be loaded last) -->
<script src="https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-plugin.js"></script>
</body>
</html>Option 2: Using npm Package
If you're using a bundler (webpack, vite, etc.):
// Import CSS
import '@airforcerp/accessibility-widget/accessibility-plugin.css';
// Import and configure
import '@airforcerp/accessibility-widget/accessibility-config.js';
import '@airforcerp/accessibility-widget/accessibility-plugin.js';Or in HTML after installing via npm:
<!-- Boxicons (Required) -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">
<!-- From node_modules -->
<link rel="stylesheet" href="./node_modules/@airforcerp/accessibility-widget/accessibility-plugin.css">
<script src="./node_modules/@airforcerp/accessibility-widget/accessibility-config.js"></script>
<script src="./node_modules/@airforcerp/accessibility-widget/accessibility-plugin.js"></script>⚙️ Configuration
Customize the plugin by creating a configuration object:
<script>
var AccessibilityConfig = {
// Widget position: 'bottom-left' or 'bottom-right'
position: 'bottom-right',
// Button text
buttonText: 'Accessibility',
// Show reset button
showReset: true,
// Default font size (75, 100, 125, 150, 200)
fontSize: 100,
// Default contrast: 'normal', 'high', or 'dark'
contrast: 'normal',
// Default line height: 'normal' or 'large'
lineHeight: 'normal',
// Default letter spacing: 'normal' or 'wide'
letterSpacing: 'normal',
// Default font family: 'default', 'sans-serif', 'serif', 'monospace'
fontFamily: 'default',
// Color blindness filter: 'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'
colorBlindness: 'none',
// Enable features by default
focusIndicator: false,
readingGuide: false,
readingMask: false,
textHighlight: false,
stopAnimations: false,
underlineLinks: false,
showImageAlt: false,
ttsEnabled: false,
// TTS settings
ttsRate: 1.0,
ttsPitch: 1.0,
ttsVolume: 1.0,
ttsVoice: 'default',
// TTS Language: 'en' (English), 'es' (Español), 'de' (Deutsch),
// 'fr' (Français), 'zh' (中文/Mandarin), 'ko' (한국어), 'no' (Norsk)
ttsLanguage: 'en'
};
</script>
<script src="https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-plugin.js"></script>🌍 Multi-Language TTS Support
The plugin includes a dedicated tts.js module that provides automatic language detection and support for 7 languages:
- English (en) - Default
- Español (es) - Spanish
- Deutsch (de) - German
- Français (fr) - French
- 中文 (zh) - Mandarin Chinese
- 한국어 (ko) - Korean
- Norsk (no) - Norwegian
Automatic Language Detection
The TTS module automatically detects the language of text being read based on:
- Character patterns (Chinese, Korean)
- Common words (English, Spanish, German, French, Norwegian)
- Page language attribute (
<html lang="...">)
Manual Language Selection
Users can manually select a language from the "TTS Language" dropdown in the accessibility panel.
✨ Features
- 20+ Accessibility Features
- WCAG 2.2 Level AA Compliant
- Multi-Language Text-to-Speech (TTS)
- English (en)
- Español / Spanish (es)
- Deutsch / German (de)
- Français / French (fr)
- 中文 / Mandarin (zh)
- 한국어 / Korean (ko)
- Norsk / Norwegian (no)
- Color Blindness Filters
- Reading Tools (Guide, Mask, Highlight)
- Font & Display Customization
- Keyboard Navigation
- Screen Reader Support
- Mobile Friendly
📚 Documentation
🔗 CDN Links
jsDelivr (Recommended)
- CSS:
https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-plugin.css - JS:
https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-plugin.js - Config:
https://cdn.jsdelivr.net/npm/@airforcerp/accessibility-widget@latest/accessibility-config.js
unpkg
- CSS:
https://unpkg.com/@airforcerp/accessibility-widget@latest/accessibility-plugin.css - JS:
https://unpkg.com/@airforcerp/accessibility-widget@latest/accessibility-plugin.js - Config:
https://unpkg.com/@airforcerp/accessibility-widget@latest/accessibility-config.js
🆘 Support
📄 License
MIT License - Free to use and modify
👨💻 Author
AirforceRP
- GitHub: @airforcerp
- Repository: Website-Accessibility-Widget
Version: 1.0.0
Last Updated: November 2025