Accessibility Overlays vs Real Fixes: What Actually Works

DEFINITION

Overlay Widget

A JavaScript plugin that loads on top of your website and attempts to modify the DOM at runtime to fix accessibility issues. Products like accessiBe, UserWay, and AudioEye use overlays. The overlay does not change your source code — it adds a layer on top. If the overlay fails to load (ad blockers, JavaScript errors, slow connections), the underlying inaccessible site is what users get.

DEFINITION

Source Code Remediation

The practice of fixing accessibility issues directly in your website's HTML, CSS, and JavaScript source files. This means adding proper alt attributes, fixing heading structure, adding form labels, and building keyboard navigation into the actual codebase. Fixes persist regardless of whether JavaScript loads.

DEFINITION

VPAT

Voluntary Product Accessibility Template. A standardized document that details how a product conforms to accessibility standards (Section 508, WCAG 2.1). Enterprise and government procurement processes require VPATs. An overlay widget cannot produce a valid VPAT for your website because it does not change the underlying product.

What Accessibility Overlays Actually Do

An accessibility overlay is a JavaScript widget that loads on top of your website. When the page renders, the overlay script scans the DOM and attempts to patch accessibility issues in real time — adding ARIA attributes, modifying contrast, injecting alt text guesses, and offering users a toolbar to adjust display settings.

The pitch sounds appealing: add one line of JavaScript to your site and get instant accessibility compliance. That pitch does not match what actually happens.

What Overlays Get Wrong

Overlays operate on the rendered DOM, not your source code. Every fix they apply is temporary — it exists only as long as the overlay JavaScript loads and runs correctly. If a user has an ad blocker, a slow connection, or a JavaScript error on the page, the overlay never loads and the underlying inaccessible site is what they get.

Beyond the loading problem, overlays have fundamental technical limitations:

They cannot fix structural HTML issues. If your form inputs lack associated <label> elements in the source code, the overlay tries to guess the association at runtime. These guesses are often wrong, especially on complex forms.

They cannot fix inaccessible custom widgets. A JavaScript date picker or modal dialog built without keyboard support cannot be made keyboard-accessible by an overlay. The overlay would need to rewrite the widget’s entire interaction model.

They cannot fix content issues. AI-generated alt text from overlays is frequently inaccurate. An image of a product pricing table might get alt text like “image of a table” instead of describing the actual pricing data. Misleading alt text can be worse than missing alt text.

They introduce new barriers. Screen reader users consistently report that overlays change their navigation experience, override their assistive technology preferences, and add unexpected announcements. The overlay’s “fixes” can make the page harder to use than the unfixed version.

The Legal Reality

Courts have been clear: using an overlay does not constitute ADA compliance. Multiple federal court cases have resulted in rulings against website owners who relied on overlay products.

The legal standard is whether the website is “usable by people with disabilities,” not whether the website owner purchased a particular product. When plaintiffs demonstrate that a site remains inaccessible despite running an overlay — which independent testing consistently confirms — the overlay provides no legal protection.

The National Federation of the Blind has specifically targeted companies using overlay products in ADA enforcement actions, arguing that overlays create additional barriers rather than removing them.

What Actually Works: Source-Code Remediation

Source-code remediation means fixing the actual accessibility issues in your HTML, CSS, and JavaScript. When you add a <label> element to a form input in your source code, that fix is permanent, does not depend on JavaScript loading, and works across all browsers and assistive technologies.

The process is straightforward:

1. Scan your site to identify WCAG violations
2. Prioritize issues by severity and legal risk
3. Fix each issue in your source code
4. Validate fixes with automated rescanning and manual testing
5. Monitor for regressions as your site changes

Tools like A11yProof automate steps 1, 2, and 5, and generate production-ready code for step 3. You get specific code changes — not a JavaScript band-aid.

Why Source-Code Fixes Are Worth the Effort

Source-code remediation takes more effort up front than pasting an overlay script tag. But the results are fundamentally different:

Fixes are permanent. A <label> element in your HTML does not disappear when JavaScript fails to load.

Fixes are verifiable. You can test your source code against WCAG criteria and prove conformance. An overlay produces no verifiable evidence of compliance.

Fixes improve your site for everyone. Proper heading structure, labeled form fields, and keyboard navigation improve usability for all users — not just those using assistive technologies.

Fixes hold up in court. When you can demonstrate that you identified issues, fixed them in source code, and continue to monitor for regressions, you have documented evidence of good-faith compliance effort.

The Cost Comparison

Overlay widgets typically cost $49-$199/month and provide no real compliance. Source-code remediation can be done manually (time-intensive but free) or with tools like A11yProof that automate scanning and generate fixes starting at $29/month.

The real cost comparison is not overlay vs. scanning tool — it is the cost of an ADA demand letter (typically $10,000-$50,000 in settlement) versus the cost of actually fixing your site. Overlays do not reduce that demand letter risk. Source-code fixes do.