A11Y Overlay is a free and open-source tool designed to help users with disabilities customize their browsing experience. Our primary goal is to discourage misleading marketing claims from commercial overlays, which often promise instant or total compliance with accessibility standards. Accessibility is a process that requires thoughtful design and development—this overlay simply offers basic assistive features for end users.
Note for Developers: Please remember that no overlay can replace a fully accessible website. To learn more about best practices and how to integrate accessibility into your workflow, see our Developer Guidance below.
- Introduction
- Criticisms of Existing A11Y Overlays
- Project Goals
- Features
- Usage
- Privacy and Data Protection
- Developer Guidance
- Contributing
- License
Commercial A11Y overlays often promise “one-click” or “one-line-of-code” solutions that claim to make websites fully compliant with WCAG or ADA guidelines. In reality, true accessibility involves comprehensive testing, design iteration, and development best practices. Overlays can complement (but never replace) a properly accessible website.
-
Incomplete Accessibility
Many overlays only solve a fraction of the issues users encounter, leaving significant barriers unaddressed. -
Misleading Advertising
Companies often claim total or automatic compliance, encouraging website owners to believe they’ve “fixed” accessibility. -
User Experience Conflicts
Overlays can interfere with native assistive technology, making the experience worse for some users. -
Privacy Concerns
Some commercial overlays track user interactions (e.g., button clicks, settings), raising data protection issues. -
Quick-Fix Mentality
Overlays perpetuate the idea that accessibility can be instantly achieved, rather than emphasizing inclusive design and development from the start.
-
User-Focused
Provide useful customization features that genuinely assist users with various disabilities. -
Honesty and Transparency
Make it clear that overlays are not a complete accessibility solution, but an option for end users. -
No Data Collection
Ensure user privacy by not collecting or storing personal or behavioral data. -
Open Source
Encourage collaboration and improvements from the community.
-
Seizure Safe Profile
Clears flashes and reduces strong color contrasts to minimize seizure triggers. -
Vision Impaired Profile
Enhances the website’s visuals for better clarity and readability. -
ADHD Friendly Profile
Emphasizes focus by reducing visual distractions and clutter. -
Cognitive Disability Profile
Assists with reading and focusing by simplifying content presentation. -
Keyboard Navigation (Motor)
Allows full navigation of the website using only the keyboard. -
Blind Users (Screen Reader)
Optimizes the website structure for screen-reader compatibility.
- Dark Contrast
- Light Contrast
- High Contrast
- Adjust Text Colors
- High Saturation
- Adjust Title Colors
- Monochrome
- Adjust Background Colors
- Low Saturation
(“Cancel” options are available to revert to default at any point.)
- Mute Sounds
- Hide Images
- Read Mode & Useful Links
- Reading Guide
- Stop Animations
- Reading Mask
- Highlight Hover / Focus
- Big Black Cursor
- Big White Cursor
(“Select an option” or “#” placeholders can be used to add more orientation tools or custom links.)
- Increase/Decrease Text Size
- Highlight Titles
- Highlight Links
- Adjust Line Height
- Adjust Letter Spacing
- Text Magnifier
- Align Center / Left / Right
- Default (Reset)
-
Contrast Mode
Adjust color contrast for easier reading. -
Enable Blue Filter
Reduce blue light to relieve eye strain. -
Night Mode
Apply a dark theme for low-light environments. -
Read Aloud
(Where possible) read on-screen text aloud. -
Color Deficiency
Simulate or adjust for color vision deficiencies. -
Hide Images
Remove or mask distracting visuals for better focus.
-
Keyboard Navigation
Enhance focus outlines and allow better tab navigation. -
Large Cursor
Increase cursor size for easier screen tracking. -
Accessible Font
Switch to simpler, more legible fonts. -
Stop Animations
Pause or remove autoplaying and looping animations. -
Turn Off Sound/Audio
Mute audio elements for a quieter experience. -
Reset All
Revert all settings and customizations to defaults.
These features are aimed at end users who need immediate adjustments to a webpage to improve their experience.
- Only Focus When activated, this feature highlights the currently focused element on the page, providing developers with a clear visual cue to identify and improve the accessibility of interactive elements, such as buttons, links, and form fields, ultimately enhancing the overall user experience for people with disabilities.
These features are aimed at developers who want to improve the accessibility of their web applications.
- Installation
TODO
- No Data Tracking: This project does not, by default, collect any analytics or personal information.
- Local Operation: All customization occurs locally in the user’s browser, unless you configure otherwise.
- User Control: Users can reset or turn off all features at any time.
Although this overlay provides convenience features for end users, it does not address underlying accessibility issues in your code or content. For genuine compliance with WCAG, ARIA, and other standards:
-
Incorporate Accessibility by Design
Start accessibility efforts early in the design process—color contrasts, keyboard navigation, alt text, etc. -
Use Semantic HTML
Proper headings, landmarks, and element attributes help screen readers and other tools interpret your content correctly. -
Follow ARIA Guidelines
When HTML alone isn’t sufficient, use ARIA attributes responsibly (e.g.,aria-labelledby,aria-describedby). -
Perform Regular Testing
Use automated tools as one part of your strategy, but also conduct manual testing and involve users with disabilities. -
Continuous Improvement
Accessibility is an ongoing process. Regular audits and feedback loops ensure that new content remains accessible.
By focusing on these areas, you will reduce the need for overlays and truly improve your site’s usability for everyone.
We welcome contributions from the community! To get involved:
- Fork this repository.
- Create a feature branch (e.g.,
feature/my-new-feature). - Commit your changes, ensuring each commit has a clear message.
- Open a pull request, detailing the purpose and scope of your contribution.
Feel free to suggest new features, report bugs, or provide feedback in the issue tracker.
This project is distributed under the MIT License. You can use, modify, and distribute it according to the terms and conditions outlined in the license.
The A11Y Overlay is intended to support users and highlight the importance of honest accessibility. However, no overlay can fully substitute a robust, accessibility-first design and development process. We encourage you to use this tool responsibly, respect user privacy, and continue building an inclusive digital experience for everyone.