A lightweight, customizable accessibility widget that helps make websites more accessible to all users. This widget provides various tools to improve readability and usability for people with different accessibility needs.
This widget provides user preference controls that allow website visitors to adjust visual and interactive elements according to their needs. Features include font size adjustment, contrast options, reading guides, and animation controls.
This widget provides user-facing customization tools. It does not provide, ensure, or guarantee accessibility compliance with WCAG, ADA, Section 508, or any other accessibility standards.
Website accessibility requires proper semantic HTML, ARIA implementation, keyboard navigation, alternative text, and other fundamental development practices that must be implemented at the code level.
- 🔍 Text Adjustments: Font size scaling (3 levels), bold text, line height, letter spacing
- 🎨 Color Adjustments: Dark contrast, light contrast, invert colors, high/low saturation, monochrome
- 📖 Reading Tools: Dyslexia-friendly font, reading guide, highlight links/titles
- 🛠️ Interaction Tools: Large cursor, pause animations, hide images
- 🌍 Multi-language Support: Expandable language system
- 💾 Persistent Settings: Saves user preferences across sessions
- ⌨️ Keyboard Accessible: Full keyboard navigation support
- 📱 Mobile Friendly: Responsive design for all devices
This widget provides user preference controls (like font size, contrast, etc.) similar to browser settings. It is NOT an automated accessibility overlay that claims to fix compliance issues.
We strongly support the accessibility community's position outlined in the Overlay Factsheet. Proper accessibility must be built into websites from the ground up, not added as an afterthought.
Add this single line to your website's HTML:
<script src="https://cdn.jsdelivr.net/gh/ifrederico/accessible-web-widget@latest/dist/accessible-web-widget.min.js"></script>The widget will automatically initialize when the page loads.
Always get the latest version:
<script src="https://cdn.jsdelivr.net/gh/ifrederico/accessible-web-widget@latest/dist/accessible-web-widget.min.js"></script>Or use a specific version:
<script src="https://cdn.jsdelivr.net/gh/ifrederico/accessible-web-widget@1.0.0/dist/accessible-web-widget.min.js"></script>- Download
accessible-web-widget.min.jsfrom thedistfolder - Upload to your website
- Add to your HTML:
<script src="/path/to/accessible-web-widget.min.js"></script>Control where the widget button appears:
<!-- Default: bottom-left -->
<div data-acc-position="bottom-left"></div>
<!-- Other options: -->
<div data-acc-position="bottom-right"></div>
<div data-acc-position="top-left"></div>
<div data-acc-position="top-right"></div>
<div data-acc-position="center-left"></div>Set the default language:
<div data-acc-lang="en"></div>- Chrome/Edge 88+
- Firefox 78+
- Safari 14+
- iOS Safari 14+
- Chrome for Android
View a live demo: https://ifrederico.github.io/accessible-web-widget/examples/
THIS SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND.
Please read the full DISCLAIMER for important legal information including:
- Limitations of liability
- No guarantee of accessibility compliance
- Your responsibilities as a user
- Indemnification terms
This widget is a tool to assist with accessibility but does not guarantee compliance with WCAG, ADA, Section 508, or any other accessibility standards.
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
Found a bug? Please open an issue with:
- Browser and version
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable
MIT License. This software is provided "as is" without warranty of any kind, express or implied. See LICENSE file for complete terms.
- Icons from Google Material Icons
- OpenDyslexic font by Abbie Gonzalez
- Inspired by the need for better web accessibility
Remember: This widget is one part of making your website accessible. Always test your entire website with screen readers and accessibility tools, and consult with accessibility professionals for comprehensive compliance.