Accessibility Widget - Integration Examples

📋 Basic Integration

The simplest way to add accessibility features to any website:

src="accessibility-widget.js">

                ✅ That's it! The widget will automatically initialize and appear in the bottom-right corner.
            

🔌 WordPress Integration

Add to your theme's functions.php file:

function add_accessibility_widget() {
    wp_enqueue_script('accessibility-widget', 
        get_template_directory_uri() . '/js/accessibility-widget.js', 
        array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'add_accessibility_widget');
                    

Create a simple WordPress plugin:

/*
Plugin Name: Accessibility Widget
Description: Adds comprehensive accessibility features
Version: 1.0.0
*/

function accessibility_widget_init() {
    wp_enqueue_script('accessibility-widget', 
        plugin_dir_url(__FILE__) . 'accessibility-widget.js', 
        array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'accessibility_widget_init');
                    

Direct integration in theme templates:

src="/js/accessibility-widget.js">

⚛️ React & Next.js Integration

import { useEffect } from'react';

export default functionApp() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/accessibility-widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return (
    
      {/* Your app content */}
    

  );
}
                    

// pages/_app.js
import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/accessibility-widget.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return ;
}
                    

import React, { useEffect, useState } from'react';

constAccessibilityWidget = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = '/accessibility-widget.js';
    script.onload = () => setIsLoaded(true);
    document.head.appendChild(script);
  }, []);

  return isLoaded ? null : Loading accessibility features...
;
};

export default AccessibilityWidget;
                    

🖖 Vue.js Integration

// In your main.js or App.vue
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = '/accessibility-widget.js';
    script.async = true;
    document.head.appendChild(script);
  }
}

// Or using Composition API
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const script = document.createElement('script');
      script.src = '/accessibility-widget.js';
      document.head.appendChild(script);
    });
  }
}
            

🔷 Drupal Integration

Add to your theme's .libraries.yml file:

# mytheme.libraries.yml
accessibility-widget:
  js:
    js/accessibility-widget.js: {}
  dependencies:
    - core/jquery
            

Then attach it in your theme or module:

// In your .theme file or module
function mytheme_page_attachments_alter(array &$attachments) {
  $attachments['#attached']['library'][] = 'mytheme/accessibility-widget';
}
            

⚙️ Advanced Configuration

Custom Position

Change widget position and appearance

White Label

Customize branding and colors

Analytics

Integrate with GA4 or Adobe Analytics

Multi-language

Support for 140+ languages

// Configure before the widget loads
window.AccessibilityWidget = {
  config: {
    position: 'bottom-left',     // Position of launcher
    iconColor: '#your-brand-color', // Custom color
    iconSize: '60px',            // Button size
    language: 'es',              // Default language
    enableAnalytics: true,       // Enable tracking
    branding: {
      companyName: 'Your Company',
      logo: 'path/to/logo.png',
      colors: {
        primary: '#4F46E5',
        secondary: '#6366F1'
      }
    }
  }
};

// Then load the script
 src="accessibility-widget.js">
            

🎮 Programmatic Control

// Access the widget instance
const widget = window.AccessibilityWidget;

// Toggle specific features
widget.toggleSetting('darkContrast');
widget.toggleSetting('textToSpeech');
widget.toggleSetting('readingGuide');

// Adjust numeric settings
widget.adjustSetting('fontSize', 1);     // Increase
widget.adjustSetting('contentSize', -1);  // Decrease

// Control panel
widget.openPanel();
widget.closePanel();
widget.togglePanel();

// Settings management
widget.resetSettings();
widget.saveSettings();
console.log(widget.state.settings);
            

🧪 Testing & Validation

                💡 Pro Tip: Always test your accessibility features with real users and assistive technologies.
            

Screen Readers

Test with NVDA, JAWS, VoiceOver

Keyboard Navigation

Ensure all features work with Tab/Enter

Color Contrast

Verify WCAG AA compliance

Mobile Testing

Test on various devices and orientations

// Automated testing example
describe('Accessibility Widget', () => {
  test('should initialize correctly', () => {
    expect(window.AccessibilityWidget).toBeDefined();
    expect(document.getElementById('accessibility-launcher')).toBeInTheDocument();
  });
  
  test('should toggle panel on click', () => {
    const button = document.getElementById('accessibility-trigger');
    button.click();
    expect(document.getElementById('accessibility-panel')).toHaveClass('open');
  });
});
            

🔧 Troubleshooting

                Common Issues & Solutions:
                Widget not appearing: Check console for JavaScript errors
Features not working: Ensure script loads after DOM is ready
Styling conflicts: Use CSS specificity or !important declarations
Mobile issues: Verify viewport meta tag is present

            

// Debug mode
window.AccessibilityWidget.config.debug = true;

// Check if widget loaded
if (window.AccessibilityWidget) {
  console.log('Widget loaded successfully');
  console.log('Current settings:', window.AccessibilityWidget.state.settings);
} else {
  console.error('Accessibility widget failed to load');
}

// Force initialization
if (window.AccessibilityWidget && !window.AccessibilityWidget.state.initialized) {
  window.AccessibilityWidget.init();
}
            