Configuration

Configuration Guide

Learn how to customize the Accessibility Widget to match your needs and website design.

📋 Configuration File

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.

⚙️ Configuration Options

Basic 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
};

Display Settings

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'
};

Color & Vision Settings

var AccessibilityConfig = {
    // Default color blindness filter
    colorBlindness: 'none',     // Options: 'none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'
};

Accessibility Features

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
};

Text-to-Speech Settings

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'
};

📝 Complete Configuration Example

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'
};

🎨 Common Configuration Scenarios

High Contrast Default

For websites targeting users with low vision:

var AccessibilityConfig = {
    contrast: 'high',
    fontSize: 125,
    lineHeight: 'large',
    underlineLinks: true,
    focusIndicator: true
};

Large Text Default

For websites targeting users with visual impairments:

var AccessibilityConfig = {
    fontSize: 150,
    lineHeight: 'large',
    letterSpacing: 'wide',
    fontFamily: 'sans-serif'
};

TTS Enabled by Default

For websites with lots of text content:

var AccessibilityConfig = {
    ttsEnabled: true,
    ttsRate: 1.0,
    ttsVolume: 0.8
};

Left-Side Widget

For websites with right-side navigation:

var AccessibilityConfig = {
    position: 'bottom-left'
};

🔄 Dynamic Configuration

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');

📍 Configuration File Location

CDN Installation

When using CDN, you can:

1. Use default config: Don't include the config file
2. Use CDN config: Include the CDN config file and it will be loaded
3. 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>

Manual Installation

Place your accessibility-config.js file in the same directory as your other plugin files, or adjust the path accordingly.

⚠️ Important Notes

1. File Order: The config file must be loaded before accessibility-plugin.js
2. Default Values: If a config option is not specified, the plugin uses default values
3. User Preferences: User-selected settings override config defaults
4. Persistence: User settings are saved in localStorage and persist across sessions

🔍 Verifying Configuration

To verify your configuration is working:

1. Open your website
2. Open browser console (F12)
3. Type: AccessibilityPlugin.getSettings()
4. Check that your configured values are present

🆘 Troubleshooting

Configuration Not Applied

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

Settings Reset

Problem: Settings reset to defaults.

Solutions:

• Check if localStorage is enabled
• Verify config file is being loaded
• Check for JavaScript errors

📚 Related Pages

• Installation Guide
• JavaScript API
• Customization Guide