-
Notifications
You must be signed in to change notification settings - Fork 0
Quick Start Guide
Luc edited this page Nov 20, 2025
·
2 revisions
Get the Accessibility Widget up and running in 5 minutes!
Copy and paste this code into the <head> section of your HTML page:
<!-- Include Boxicons for icons (required) --> <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"> <!-- Include the CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css"> <!-- Include the plugin (must be loaded last) --> <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script>
- Save your HTML file
- Open it in a browser
- Look for the "Accessibility" button in the bottom-right corner
- Click it to open the panel
Try these features:
- β Click "Font Size" and change it to 150%
- β Click "Contrast" and try "High Contrast"
- β Select some text and try "Read Selected Text"
- β Try a color blindness filter
That's it! The widget is now working on your site.
Here's a complete HTML example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Accessible Website</title> <!-- Accessibility Widget --> <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css"> <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script> </head> <body> <h1>Welcome to My Website</h1> <p>This website now has accessibility features! Look for the button in the bottom-right corner.</p> </body> </html>
- Customize Settings - Adjust default settings
- Learn the API - Control the widget programmatically
- Customize Appearance - Match your site's design
- Widget button appears on page
- Button opens panel when clicked
- Font size changes work
- Contrast modes work
- No errors in browser console (F12)
- Check the Installation Guide for detailed instructions
- See the Troubleshooting guide for common issues
- Review the FAQ for answers
The Accessibility Widget is now installed and ready to use. Users can now customize their browsing experience to meet their accessibility needs.
- Installation Guide - Step-by-step installation instructions
- Quick Start Guide - Get up and running in 5 minutes
- Configuration Guide - Customize the plugin to your needs
- Features Overview - Complete list of all features
- JavaScript API - Programmatic control documentation
- Browser Compatibility - Supported browsers and features
- WordPress Integration - How to integrate with WordPress
- Customization Guide - Styling and theming
- Advanced Usage - Tips and tricks for power users
- Contributing - How to contribute to the project
- Development Setup - Set up your development environment
- Architecture - Understanding the codebase
- Troubleshooting - Common issues and solutions
- FAQ - Frequently asked questions
- Known Issues - Current limitations and workarounds