API

JavaScript API Documentation

Complete reference for the Accessibility Widget JavaScript API.

🌐 Global Object

The plugin exposes a global AccessibilityPlugin object that provides programmatic control over all accessibility features.

// Check if plugin is loaded
if (typeof AccessibilityPlugin !== 'undefined') {
    // Plugin is available
}

📚 API Methods

toggle()

Opens or closes the accessibility panel.

Syntax:

AccessibilityPlugin.toggle();

Returns: undefined

Example:

// Toggle the panel
AccessibilityPlugin.toggle();

// Toggle from a custom button
document.getElementById('myBtn').addEventListener('click', function() {
    AccessibilityPlugin.toggle();
});

---

reset()

Resets all accessibility settings to their default values.

Syntax:

AccessibilityPlugin.reset();

Returns: undefined

Example:

// Reset all settings
AccessibilityPlugin.reset();

// Reset after 5 seconds
setTimeout(function() {
    AccessibilityPlugin.reset();
}, 5000);

---

getSettings()

Returns an object containing all current accessibility settings.

Syntax:

AccessibilityPlugin.getSettings();

Returns: Object - An object containing all current settings

Example:

// Get current settings
const settings = AccessibilityPlugin.getSettings();
console.log(settings);
// Output: {
//   fontSize: 100,
//   contrast: 'normal',
//   colorBlindness: 'none',
//   ttsEnabled: false,
//   ...
// }

// Check specific setting
const fontSize = AccessibilityPlugin.getSettings().fontSize;
console.log('Current font size:', fontSize);

Returned Object Properties:

• fontSize (number): Current font size percentage
• contrast (string): Current contrast mode
• lineHeight (string): Current line height
• letterSpacing (string): Current letter spacing
• fontFamily (string): Current font family
• colorBlindness (string): Current color blindness filter
• focusIndicator (boolean): Focus indicator enabled
• readingGuide (boolean): Reading guide enabled
• stopAnimations (boolean): Animations stopped
• underlineLinks (boolean): Links underlined
• showImageAlt (boolean): Image alt text shown
• ttsEnabled (boolean): TTS enabled
• ttsRate (number): TTS speech rate
• ttsPitch (number): TTS pitch
• ttsVolume (number): TTS volume

---

setFontSize(size)

Sets the font size percentage.

Syntax:

AccessibilityPlugin.setFontSize(size);

Parameters:

• size (number): Font size percentage. Must be one of: 75, 100, 125, 150, or 200

Returns: undefined

Example:

// Set font size to 150%
AccessibilityPlugin.setFontSize(150);

// Increase font size incrementally
function increaseFontSize() {
    const current = AccessibilityPlugin.getSettings().fontSize;
    const sizes = [75, 100, 125, 150, 200];
    const currentIndex = sizes.indexOf(current);
    if (currentIndex < sizes.length - 1) {
        AccessibilityPlugin.setFontSize(sizes[currentIndex + 1]);
    }
}

---

setContrast(mode)

Sets the contrast mode.

Syntax:

AccessibilityPlugin.setContrast(mode);

Parameters:

• mode (string): Contrast mode. Must be one of: 'normal', 'high', or 'dark'

Returns: undefined

Example:

// Set high contrast
AccessibilityPlugin.setContrast('high');

// Toggle between normal and high contrast
function toggleContrast() {
    const current = AccessibilityPlugin.getSettings().contrast;
    AccessibilityPlugin.setContrast(current === 'normal' ? 'high' : 'normal');
}

// Set dark mode
AccessibilityPlugin.setContrast('dark');

---

setColorBlindness(type)

Sets the color blindness filter.

Syntax:

AccessibilityPlugin.setColorBlindness(type);

Parameters:

• type (string): Color blindness type. Must be one of: 'none', 'protanopia', 'deuteranopia', 'tritanopia', or 'achromatopsia'

Returns: undefined

Example:

// Apply protanopia filter
AccessibilityPlugin.setColorBlindness('protanopia');

// Cycle through color blindness filters
const filters = ['none', 'protanopia', 'deuteranopia', 'tritanopia', 'achromatopsia'];
let currentFilterIndex = 0;

function cycleColorBlindness() {
    currentFilterIndex = (currentFilterIndex + 1) % filters.length;
    AccessibilityPlugin.setColorBlindness(filters[currentFilterIndex]);
}

// Remove filter
AccessibilityPlugin.setColorBlindness('none');

---

speak(text)

Speaks the provided text using text-to-speech.

Syntax:

AccessibilityPlugin.speak(text);

Parameters:

• text (string): The text to be spoken

Returns: undefined

Example:

// Speak custom text
AccessibilityPlugin.speak('Hello, this is text-to-speech');

// Speak selected text
function speakSelection() {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
        AccessibilityPlugin.speak(selectedText);
    }
}

// Speak page content
AccessibilityPlugin.speak(document.body.innerText.substring(0, 5000));

Notes:

• Maximum recommended text length is 5000 characters
• Requires browser support for Web Speech API
• May require user interaction to activate (browser security)

---

stopSpeaking()

Stops the current text-to-speech playback.

Syntax:

AccessibilityPlugin.stopSpeaking();

Returns: undefined

Example:

// Stop speaking
AccessibilityPlugin.stopSpeaking();

// Stop speaking after 10 seconds
AccessibilityPlugin.speak('This is a long text...');
setTimeout(function() {
    AccessibilityPlugin.stopSpeaking();
}, 10000);

---

💡 Usage Examples

Example 1: Auto-adjust Based on User Preferences

// Check user's system preferences
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // User prefers reduced motion
    // Plugin automatically handles this, but you can add custom logic
}

if (window.matchMedia('(prefers-contrast: high)').matches) {
    AccessibilityPlugin.setContrast('high');
}

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    AccessibilityPlugin.setContrast('dark');
}

Example 2: Save and Restore User Preferences

// Save preferences
function savePreferences() {
    const settings = AccessibilityPlugin.getSettings();
    localStorage.setItem('myApp_accessibility', JSON.stringify(settings));
}

// Restore preferences
function restorePreferences() {
    const saved = localStorage.getItem('myApp_accessibility');
    if (saved) {
        const settings = JSON.parse(saved);
        AccessibilityPlugin.setFontSize(settings.fontSize);
        AccessibilityPlugin.setContrast(settings.contrast);
        AccessibilityPlugin.setColorBlindness(settings.colorBlindness);
    }
}

// Call on page load
window.addEventListener('load', restorePreferences);

// Save on settings change
// (You would need to listen for changes or call savePreferences() after each change)

Example 3: Custom Accessibility Controls

// Create custom font size buttons
document.getElementById('fontSmall').addEventListener('click', function() {
    AccessibilityPlugin.setFontSize(75);
});

document.getElementById('fontNormal').addEventListener('click', function() {
    AccessibilityPlugin.setFontSize(100);
});

document.getElementById('fontLarge').addEventListener('click', function() {
    AccessibilityPlugin.setFontSize(150);
});

// Create custom contrast toggle
document.getElementById('toggleContrast').addEventListener('click', function() {
    const current = AccessibilityPlugin.getSettings().contrast;
    const next = current === 'normal' ? 'high' : 'normal';
    AccessibilityPlugin.setContrast(next);
});

Example 4: Integrate with Your App's Settings

// Sync with your app's settings
function syncAccessibilitySettings() {
    const appSettings = getMyAppSettings(); // Your function
    
    if (appSettings.fontSize) {
        AccessibilityPlugin.setFontSize(appSettings.fontSize);
    }
    
    if (appSettings.contrast) {
        AccessibilityPlugin.setContrast(appSettings.contrast);
    }
}

// Update your app when accessibility settings change
function onAccessibilityChange() {
    const settings = AccessibilityPlugin.getSettings();
    updateMyAppSettings(settings); // Your function
}

⚠️ Important Notes

1. Plugin Must Be Loaded: Ensure the plugin is fully loaded before using the API
2. Browser Support: Some features (like TTS) require specific browser support
3. User Settings Override: User-selected settings override programmatic changes
4. Persistence: Settings are automatically saved to localStorage

🔍 Error Handling

// Check if plugin is available
if (typeof AccessibilityPlugin === 'undefined') {
    console.error('Accessibility Plugin is not loaded');
    return;
}

// Try-catch for API calls
try {
    AccessibilityPlugin.setFontSize(150);
} catch (error) {
    console.error('Error setting font size:', error);
}

📚 Related Pages

• Installation Guide
• Configuration Guide
• Troubleshooting