Overlay Accessibility Widgets Fail ADA Website Compliance

October 24, 2020

Updated May 14, 2021

May 14 Update to More Reading - NBC News article, blind user Youtube video "Avoid AccessiBe & other companies cliaming quick & easy AI accessibility"

As web-related ADA lawsuits surge nationwide, website owners are desperate for quick and cheap accessibility solutions. Naturally there are a growing number of providers claiming to offer that quick and cheap ADA compliance solution. These "solutions" are known as accessibility"overlays" or "widgets". Websites with these are flagged by a blue accessibility icon on the bottom of each page, which triggers the overlay/widget.

The accessibility community stronly opposes their use, yet businesses are being duped by false claims and promises that should never pass the sniff test.

According to UsableNet's 2020 ADA Digital Accessibility Lawsuit report, over 250 lawsuits were filed against companies using widgets or overlays, stating "These solutios do nothing to make a website more accessibile for the blind."

Buyer Beware.

Blind User: "Avoid AccessiBe & other companies claiming quick & easy AI accessibility.

Overlay Solutions Falsely Claim to Automagically Make Your Website ADA Compliant

Overlay solutions are automated software solutions, which as we know, can only detect ~30% of WCAG issues. So, right out of the gate these miss ~70% of WCAG elements. This is because the WCAG is nuanced and interpretive. Machines are not good at this.

So what these do is modify the front-side code of the website - the HTML, etc. A snippet of javascript injects modifications (the overlay) to address some, but not nearly all WCAG issues. They essentially “fix” the easy stuff, but leave too many issues unaddressed to claim actual accessibility.

These solutions typically take the shape of an “accessibility button” that a user needs to be able to find and open (which may not even be possible for some users). The button opens a toolbar with options such as

Text adjustments - size, spacing, alignment 
Color - contrast, saturation, monochrome 
Adjust curser 
Add focus states 
Magnify 
Screen reader in some cases

Some now incorporate Artificial Intelligence (THE buzzword of 2020), to interpret images and automagically add alt tags, which are labels that describe images. However, as you might guess, accuracy and usefulness for the actual person using a screen reader is low.

Why Overlay Solutions Fail to Deliver True Accessibility

Overlay solutions provide a bandaid that will only cover part of the cut. Those that use this term to describe these solutions are completely accurate.

The Core Website Remains Legally Exposed

By default, the inaccessible underlying code is fully exposed to legal trolls. The overlay needs to be turned on by the user. One could just stop there.

Overlay Solutions Lack Manual Testing and Remediation

As already stated, they’re automated, so they miss 70% of WCAG issues. These can only be assessed using manual testing. Some providers do claim to provide manual testing and remediation, however the remediation is only applied to the overlay layer, not the underlying code which is left exposed.

Overlays Override the Users’ Existing Assistive Technology Tools

This is the most significant. Any person with a disability has their favorite set of tools and browser settings already tuned and learned. Forcing a user with disabilities to scrap their tools to then study, learn and customize this new set of toolbar options for each website they visit is a serious barrier. So they really don’t work for the actual people with disabilities. They only serve the interests of the website owner looking to avoid the expense of proper website accessibility.

Overlays Don’t Work Well - if at all- For Mobile

People with disabilities also use their mobile devices to browse websites, and unless heavy customization is applied, any out of the box solution will very likely fail for mobile users.

Overlays Open Security Holes

Here, the website owner is allowing a third party to open a door and inject code into your website. This inherently opens security risks that should be carefully assessed.

This video of a blind person demonstrating how overlays fail should provide a vivid view of the problem

Alternate “Accessible” Websites - ABSOLUTELY AVOID!

While this post is focused on overlay solutions, it’s very important to quickly mention this. This really is snake oil. This “solution” provides an “Accessible Website” button that links to a separate website. In practice, these “accessible websites” have different and reduced navigation, features, and content. Thus failing the core intent of the ADA to provide full and equal enjoyment. In this example for a lodging property , the actual ability to book a room is not even offered.

I’ve written previously on why to avoid alternate accessible website, so read that to learn more.

Best-Practices for Delivering a Truely ADA Compliant Website

To make your website accessible to actual people with disabilities there is no alternative to following accepted best practices. Actual 508 and ADA compliance starts with a 3-factor WCAG 2.1 A, AA audit provided by an experienced accessibility consultant who understands both WCAG and programming code.

1. Automated auditing of the entire website 

2. Manual testing of select unique pages 

3. Assistive technology testing of those same select unique pages and use-cases. 

With complete audit reporting, the website can then be property remediated addressing all WCAG 2.1 A, AA violations.

In Conclusion

Overlay solutions do have a role in providing a short-term patch. A bandaid to provide minimal accessibility while core WCAG issues are being resolved, or while a new accessible website is being developed. Otherwise these solutions only address the easy to to fix symptoms without treating the root violations.