JavaScript API Documentation

🌐 Global Object

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

📚 API Methods

toggle()

AccessibilityPlugin.toggle();

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

reset()

AccessibilityPlugin.reset();

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

getSettings()

AccessibilityPlugin.getSettings();

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

setFontSize(size)

AccessibilityPlugin.setFontSize(size);

// 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)

AccessibilityPlugin.setContrast(mode);

// 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)

AccessibilityPlugin.setColorBlindness(type);

// 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)

AccessibilityPlugin.speak(text);

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

stopSpeaking()

AccessibilityPlugin.stopSpeaking();

// 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

🔍 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