Skip to content

Advanced Usage

Jump to bottom
Luc edited this page Nov 20, 2025 · 2 revisions

Tips, tricks, and advanced techniques for power users and developers.

🚀 Performance Optimization

Lazy Loading

Load the plugin only when needed:

// Load plugin on user interaction
document.addEventListener('click', function loadAccessibilityPlugin() {
    if (!window.AccessibilityPlugin) {
        const script = document.createElement('script');
        script.src = 'path/to/accessibility-plugin.js';
        document.body.appendChild(script);
    }
    document.removeEventListener('click', loadAccessibilityPlugin);
}, { once: true });

Conditional Loading

Load based on user preferences:

// Load only if user prefers reduced motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    // Load accessibility plugin
}

CDN Caching

Use CDN for better caching:

<!-- Use specific version for better caching -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@1.0.0/accessibility-plugin.css">
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@1.0.0/accessibility-plugin.js"></script>

🎯 Programmatic Control

Event Listeners

Listen for accessibility changes:

// Monitor settings changes
function monitorAccessibilityChanges() {
    let lastSettings = AccessibilityPlugin.getSettings();
    
    setInterval(function() {
        const currentSettings = AccessibilityPlugin.getSettings();
        if (JSON.stringify(currentSettings) !== JSON.stringify(lastSettings)) {
            console.log('Settings changed:', currentSettings);
            lastSettings = currentSettings;
            // Do something when settings change
        }
    }, 1000);
}

// Start monitoring
monitorAccessibilityChanges();

Custom Triggers

Create custom triggers for accessibility features:

// Custom keyboard shortcut
document.addEventListener('keydown', function(e) {
    // Ctrl + Shift + A to toggle accessibility panel
    if (e.ctrlKey && e.shiftKey && e.key === 'A') {
        e.preventDefault();
        AccessibilityPlugin.toggle();
    }
    
    // Ctrl + Shift + F to increase font size
    if (e.ctrlKey && e.shiftKey && e.key === 'F') {
        e.preventDefault();
        const current = AccessibilityPlugin.getSettings().fontSize;
        const sizes = [75, 100, 125, 150, 200];
        const next = sizes[sizes.indexOf(current) + 1] || sizes[0];
        AccessibilityPlugin.setFontSize(next);
    }
});

🔄 Integration Patterns

React Integration

import { useEffect } from 'react';

function AccessibilityWidget() {
    useEffect(() => {
        // Load plugin
        const script = document.createElement('script');
        script.src = 'path/to/accessibility-plugin.js';
        document.body.appendChild(script);
        
        return () => {
            // Cleanup if needed
        };
    }, []);
    
    return null; // Widget renders itself
}

Vue Integration

<template>
  <div>
    <!-- Your content -->
  </div>
</template>

<script>
export default {
  mounted() {
    // Load plugin
    const script = document.createElement('script');
    script.src = 'path/to/accessibility-plugin.js';
    document.body.appendChild(script);
  }
}
</script>

Angular Integration

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div>Your content</div>'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // Load plugin
    const script = document.createElement('script');
    script.src = 'path/to/accessibility-plugin.js';
    document.body.appendChild(script);
  }
}

🎨 Advanced Styling

CSS Variables

Use CSS variables for easy theming:

:root {
    --accessibility-primary: #0066cc;
    --accessibility-primary-hover: #0052a3;
    --accessibility-panel-bg: #ffffff;
}

.accessibility-toggle-btn {
    background: var(--accessibility-primary) !important;
}

.accessibility-toggle-btn:hover {
    background: var(--accessibility-primary-hover) !important;
}

Dynamic Theming

Change theme based on time or user preference:

// Dark mode at night
const hour = new Date().getHours();
if (hour >= 18 || hour < 6) {
    AccessibilityPlugin.setContrast('dark');
}

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

📊 Analytics Integration

Track Usage

Track which features users use most:

// Track feature usage
function trackAccessibilityUsage() {
    const settings = AccessibilityPlugin.getSettings();
    
    // Send to analytics
    if (typeof gtag !== 'undefined') {
        gtag('event', 'accessibility_settings', {
            'font_size': settings.fontSize,
            'contrast': settings.contrast,
            'color_blindness': settings.colorBlindness
        });
    }
    
    // Or use your analytics
    // analytics.track('Accessibility Settings Changed', settings);
}

// Monitor changes
let lastSettings = {};
setInterval(function() {
    const current = AccessibilityPlugin.getSettings();
    if (JSON.stringify(current) !== JSON.stringify(lastSettings)) {
        trackAccessibilityUsage();
        lastSettings = current;
    }
}, 5000);

🔐 Security Considerations

Content Security Policy

If using CSP, add required sources:

Content-Security-Policy: 
    script-src 'self' https://unpkg.com https://cdn.jsdelivr.net;
    style-src 'self' https://unpkg.com https://cdn.jsdelivr.net;

Sanitization

The plugin uses only client-side code and doesn't send data to external servers. All settings are stored locally in localStorage.

🎯 Advanced Configuration

Dynamic Configuration

Generate configuration dynamically:

// Generate config based on user or page
const config = {
    position: getUserPreference('widget_position') || 'bottom-right',
    fontSize: getPageDefaultFontSize() || 100,
    contrast: detectPreferredContrast() || 'normal'
};

// Create config script
const configScript = document.createElement('script');
configScript.textContent = `var AccessibilityConfig = ${JSON.stringify(config)};`;
document.head.appendChild(configScript);

Multi-Language Support

Customize text for different languages:

// Language-specific configuration
const lang = document.documentElement.lang || 'en';

const translations = {
    en: { buttonText: 'Accessibility' },
    es: { buttonText: 'Accesibilidad' },
    fr: { buttonText: 'Accessibilité' }
};

var AccessibilityConfig = {
    buttonText: translations[lang]?.buttonText || 'Accessibility'
};

🔧 Custom Features

Add Custom Controls

Extend the plugin with custom controls:

// Wait for plugin to load
window.addEventListener('load', function() {
    setTimeout(function() {
        if (window.AccessibilityPlugin) {
            // Add custom button to panel
            const panel = document.querySelector('.accessibility-panel-content');
            if (panel) {
                const customBtn = document.createElement('button');
                customBtn.textContent = 'Custom Feature';
                customBtn.onclick = function() {
                    // Your custom functionality
                };
                panel.appendChild(customBtn);
            }
        }
    }, 1000);
});

Custom Accessibility Features

Add your own accessibility features:

// Custom high contrast mode
function applyCustomHighContrast() {
    document.body.style.filter = 'contrast(1.5) brightness(1.1)';
}

// Custom font smoothing
function applyFontSmoothing() {
    document.body.style.webkitFontSmoothing = 'antialiased';
    document.body.style.mozOsxFontSmoothing = 'grayscale';
}

📱 Mobile Optimization

Touch-Friendly Adjustments

/* Larger touch targets on mobile */
@media (max-width: 768px) {
    .accessibility-toggle-btn {
        min-height: 44px; /* iOS recommended */
        min-width: 44px;
    }
}

Mobile-Specific Features

// Detect mobile and adjust settings
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // Mobile-specific configuration
    var AccessibilityConfig = {
        fontSize: 125, // Larger default on mobile
        position: 'bottom-right'
    };
}

🎨 Advanced Theming

Theme Switcher

Create a theme switcher:

const themes = {
    light: {
        button: '#0066cc',
        panel: '#ffffff'
    },
    dark: {
        button: '#1f2937',
        panel: '#1f2937'
    },
    purple: {
        button: '#8b5cf6',
        panel: '#ffffff'
    }
};

function applyTheme(themeName) {
    const theme = themes[themeName];
    const style = document.createElement('style');
    style.textContent = `
        .accessibility-toggle-btn { background: ${theme.button} !important; }
        .accessibility-panel { background: ${theme.panel} !important; }
    `;
    document.head.appendChild(style);
}

🔄 State Management

Save/Load State

// Save state to server
function saveStateToServer() {
    const settings = AccessibilityPlugin.getSettings();
    fetch('/api/user/preferences', {
        method: 'POST',
        body: JSON.stringify(settings)
    });
}

// Load state from server
function loadStateFromServer() {
    fetch('/api/user/preferences')
        .then(res => res.json())
        .then(settings => {
            AccessibilityPlugin.setFontSize(settings.fontSize);
            AccessibilityPlugin.setContrast(settings.contrast);
        });
}

🎯 Best Practices

  1. Performance: Use CDN and lazy loading
  2. Testing: Test on multiple browsers and devices
  3. Accessibility: Don't reduce accessibility with customizations
  4. Updates: Keep plugin updated
  5. Documentation: Document custom implementations

📚 Related Pages

🆘 Need Help?

Last Updated: November 2025

Getting Started

Documentation

Guides

Development

Support

Clone this wiki locally