-
Notifications
You must be signed in to change notification settings - Fork 0
Configuration
Luc edited this page Nov 20, 2025
·
1 revision
Learn how to customize the Accessibility Widget to match your needs and website design.
The plugin can be configured via the accessibility-config.js file. This file is optional - if you don't include it, the plugin will use default settings.
var AccessibilityConfig = { // Widget position on the page position: 'bottom-right', // Options: 'bottom-left' or 'bottom-right' // Button text buttonText: 'Accessibility', // Text displayed on the toggle button // Show reset button in panel showReset: true, // true or false };
var AccessibilityConfig = { // Default font size percentage fontSize: 100, // Options: 75, 100, 125, 150, or 200 // Default contrast mode contrast: 'normal', // Options: 'normal', 'high', or 'dark' // Default line height lineHeight: 'normal', // Options: 'normal' or 'large' // Default letter spacing letterSpacing: 'normal', // Options: 'normal' or 'wide' // Default font family fontFamily: 'default', // Options: 'default', 'sans-serif', 'serif', 'monospace' };
var AccessibilityConfig = { // Default color blindness filter colorBlindness: 'none', // Options: 'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia' };
var AccessibilityConfig = { // Enable focus indicator focusIndicator: false, // true or false // Enable reading guide readingGuide: false, // true or false // Enable reading mask readingMask: false, // true or false // Enable text highlight textHighlight: false, // true or false // Stop animations stopAnimations: false, // true or false // Underline all links underlineLinks: false, // true or false // Show image alt text showImageAlt: false, // true or false };
var AccessibilityConfig = { // Enable text-to-speech by default ttsEnabled: false, // true or false // TTS speech rate (0.5 to 2.0) ttsRate: 1.0, // 0.5 = slow, 1.0 = normal, 2.0 = fast // TTS pitch (0 to 2.0) ttsPitch: 1.0, // 0 = low, 1.0 = normal, 2.0 = high // TTS volume (0 to 1.0) ttsVolume: 1.0, // 0 = silent, 1.0 = maximum // TTS voice (empty string for default) ttsVoice: 'default' // Browser-specific voice name or 'default' };
var AccessibilityConfig = { // Widget Settings position: 'bottom-right', buttonText: 'Accessibility', showReset: true, // Display Settings fontSize: 100, contrast: 'normal', lineHeight: 'normal', letterSpacing: 'normal', fontFamily: 'default', // Color & Vision colorBlindness: 'none', // Accessibility Features focusIndicator: false, readingGuide: false, readingMask: false, textHighlight: false, stopAnimations: false, underlineLinks: false, showImageAlt: false, // Text-to-Speech ttsEnabled: false, ttsRate: 1.0, ttsPitch: 1.0, ttsVolume: 1.0, ttsVoice: 'default' };
For websites targeting users with low vision:
var AccessibilityConfig = { contrast: 'high', fontSize: 125, lineHeight: 'large', underlineLinks: true, focusIndicator: true };
For websites targeting users with visual impairments:
var AccessibilityConfig = { fontSize: 150, lineHeight: 'large', letterSpacing: 'wide', fontFamily: 'sans-serif' };
For websites with lots of text content:
var AccessibilityConfig = { ttsEnabled: true, ttsRate: 1.0, ttsVolume: 0.8 };
For websites with right-side navigation:
var AccessibilityConfig = { position: 'bottom-left' };
You can also modify configuration programmatically using the JavaScript API:
// Change widget position AccessibilityPlugin.setPosition('bottom-left'); // Set default font size AccessibilityPlugin.setFontSize(125); // Enable high contrast AccessibilityPlugin.setContrast('high');
When using CDN, you can:
- Use default config: Don't include the config file
- Use CDN config: Include the CDN config file and it will be loaded
- Override with local config: Include your own config file after the CDN config
<!-- CDN config (optional) --> <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-config.js"></script> <!-- Your custom config (overrides CDN config) --> <script src="path/to/your-custom-config.js"></script>
Place your accessibility-config.js file in the same directory as your other plugin files, or adjust the path accordingly.
-
File Order: The config file must be loaded before
accessibility-plugin.js - Default Values: If a config option is not specified, the plugin uses default values
- User Preferences: User-selected settings override config defaults
- Persistence: User settings are saved in localStorage and persist across sessions
To verify your configuration is working:
- Open your website
- Open browser console (F12)
- Type:
AccessibilityPlugin.getSettings() - Check that your configured values are present
Problem: Changes to config file don't take effect.
Solutions:
- Clear browser cache
- Ensure config file is loaded before plugin JS
- Check browser console for errors
- Verify JavaScript syntax is correct
Problem: Settings reset to defaults.
Solutions:
- Check if localStorage is enabled
- Verify config file is being loaded
- Check for JavaScript errors
- Installation Guide - Step-by-step installation instructions
- Quick Start Guide - Get up and running in 5 minutes
- Configuration Guide - Customize the plugin to your needs
- Features Overview - Complete list of all features
- JavaScript API - Programmatic control documentation
- Browser Compatibility - Supported browsers and features
- WordPress Integration - How to integrate with WordPress
- Customization Guide - Styling and theming
- Advanced Usage - Tips and tricks for power users
- Contributing - How to contribute to the project
- Development Setup - Set up your development environment
- Architecture - Understanding the codebase
- Troubleshooting - Common issues and solutions
- FAQ - Frequently asked questions
- Known Issues - Current limitations and workarounds