🚀 How to Add Accessibility Widget to Your Website

Simple step-by-step guide to make your website accessible in minutes

1
Download the Widget File

First, you need the accessibility widget JavaScript file. You can download it from this project.

✅ File needed: accessibility-widget.js
Download accessibility-widget.js
2
Upload to Your Website

Upload the accessibility-widget.js file to your website's directory. Common locations:

3
Add Script Tag to Your HTML

Add this single line of code before the closing tag in your HTML:

Complete example:

My Accessible Website

Welcome to My Website

This website is now accessible to everyone!

4
Test Your Website

That's it! Your website now has the accessibility widget. You should see:

✅ Success! Your website is now accessible to users with disabilities.

📋 Platform-Specific Instructions

WordPress

Method 1: Add to theme's functions.php

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

Method 2: Use a plugin like "Insert Headers and Footers" to add the script tag.

Shopify

Add to your theme's theme.liquid file before :

{{ 'accessibility-widget.js' | asset_url | script_tag }}

Wix

Go to Settings → Custom Code → Add Code to Body (end):

Squarespace

Go to Settings → Advanced → Code Injection → Footer:

Drupal

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

accessibility-widget: js: js/accessibility-widget.js: {}

React/Next.js

Add to your _document.js or component:

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

🔧 Troubleshooting

⚠️ Widget not appearing?
  • Check if the file path is correct
  • Make sure the file uploaded successfully
  • Check browser console for errors (F12)
  • Ensure the script tag is before
⚠️ Features not working?
  • Clear browser cache and refresh
  • Check for JavaScript conflicts
  • Ensure modern browser (Chrome 60+, Firefox 55+, Safari 12+)

🎯 See It in Action

This very page has the accessibility widget installed! Look for the floating button in the bottom-right corner.

✅ Try it now: Click the accessibility button to test all features!
View Full Demo Back to Project Files