Accessible overlays aren’t accessible

You can’t solve accessibility with a single line of code. Overlays are deceitful and undermine inclusive design practices.

Step right up, everyone! Have you ever wanted to make your product fully accessible in just a single line of code? Worried about a lawsuit, but you just don’t have the time? Check out this extremely fast and cost-effective way that we can use AI-powered processes to transform your site! (Oooo, AI!)

Accessibility in an instant? It almost sounds too good to be true!

…because it is.

In an increasingly digital world, web accessibility has become a crucial part of ensuring equal access and inclusion for everyone, regardless of their abilities.

Unfortunately, some organizations have turned to accessibility overlays as a quick fix to make their websites compliant.

Alright, well, what exactly are overlays?

Overlays are third-party tools or plugins designed to be added to existing websites with the aim of enhancing accessibility. They typically appear as a button in the lower right (or left) corner of a web page with the web accessibility icon on it.

Once clicked, a menu widget appears with various setting that users can change to (allegedly) create a more usable experience. For example, many overlays can change the color scheme of the website, make text larger, and enable text-to-speech.

While they might sound great in theory, these overlays are not only ineffective but can also exacerbate accessibility issues, ultimately doing more harm than good.

P.S. If you have any first hand experience with overlays, please share! All of my findings are backed by extensive research, but I don’t personally use any assistive technologies, nor have I implemented an overlay into my work.

At the end of the day, overlays suck. Let’s go over why.

False promises

Accessibility overlays often fail to address the underlying issues that make websites inaccessible in the first place: problems in the code. Rather than fixing the root causes of inaccessibility, overlays create a facade of accessibility, providing a false sense of compliance.

Overlays lack the ability to understand the context and semantics of a website’s content, so they often make incorrect assumptions about the purpose and meaning of various elements.

This can result in misleading alt text descriptions, incorrect headings, and distorted page layouts, rendering the website even less accessible for individuals using assistive technologies.

At their best, overlays provide unnecessary accessibility features for the end user:

“To laypersons, these features may seem beneficial, but their practical value is largely overstated because the end users that these features claim to serve will already have the necessary features on their computer, either as a built-in feature or as an additional piece of software that the user needs to access not only the Web but all software.

On this latter point, it is a mistake to believe that the features provided by the overlay widget will be of much use by end users because if those features were necessary to use the website, they’d be needed for all websites that the user interacts with. Instead, the widget is — at best — redundant functionality with what the user already has.” — Overlay Fact Sheet

Accessibility overlays are typically added to a website as an afterthought, and their integration can lead to conflicts with existing accessibility features. They can also interfere with assistive technologies, such as screen readers, causing navigation difficulties and a lot of confusion. This creates a fragmented user experience and further alienates individuals with disabilities.

The WebAIM Survey of Web Accessibility Practitioners found that a “strong majority (67%) of respondents rate these tools as not at all or not very effective. Respondents with disabilities were even less favorable with 72% rating them not at all or not very effective, and only 2.4% rating them as very effective.”

As mentioned above, the end users that need these accessibility features will most likely already have the assistive technology needed, since they would need it for every web-page anyway. All of their settings and features are carefully set up to create a usable experience for them. “Overlays and similar products often override these settings and, instead, force users to learn a whole new system for every webpage. This is contrary to the principles of user-centric design.”

If you’d like to see some of the problems with overlays in action, check out this quick video by Intelliwolf:

✍︎Intelliwolf illustrates how an overlay interacts with JAWS.

Undermining accessibility efforts

Accessibility overlays undermine the efforts of web developers and advocates who work hard to create and promote inclusive and accessible digital experiences for everyone. They send a false message that accessibility is an optional add-on or a quick fix that can be achieved with a simple plugin.

This is in no way the case. Accessible design takes time and effort. It requires testing with real people who have disabilities. Advertising overlays as a quick one line of code to solve everyone’s problems is deceitful, harmful, and demoralizing to those who want to design for good.

Accessibility overlays discourage web developers and advocates from learning and applying the skills and knowledge necessary for building accessible websites from scratch.

It’s important to educate people that these overlays aren’t a magical solution. In many cases, the people who implement these overlays have good intentions, but were deceived by the marketing promises.

While an overlay might seem like a good investment, the cost of implementing one might end up costing more than if accessibility issues were just addressed in the first place.

“In addition to not meeting the requirements of the law — a purchase of an overlay solution diverts funds from addressing the issues in the website itself. Furthermore, choosing an overlay does not build capacity in an organization to understand and address accessibility issues or prioritize feedback from users with disabilities. Many overlay solutions cost a significant amount of money and that amount of money over years may actually be more than the amount needed to address the site directly.” — Timothy Springer

Accessibility Overlays Violate Standards

Accessibility overlays don’t follow the techniques or best practices recommended by the Web Content Accessibility Guidelines (WCAG), which are based on extensive research and testing with real users and experts. They also don’t comply with the Americans with Disabilities Act (ADA), which is a civil rights law that prohibits discrimination based on disability.

“While the use of an overlay may improve compliance with a handful of provisions in major accessibility standards, full compliance cannot be achieved with an overlay.” — Overlay Fact Sheet

Basically, overlays are a temporary bandage solution. In many cases, they are a band-aid thrown onto a website until the real solutions can be coded in. They aren’t meant to stay.

The rise of permanent plugins for overlays is causing some serious issues. The band-aid is supposed to come off, you can’t just leave it on. That’s gross.

“There are numerous issues with permanent plugins. To build off the bandage metaphor, a permanent plugin left on a website or web app for too long will cause the underlying experience to rot.” — A11Y Project

✍︎Silktide has an amazing video that gives an overview of some of the big problems with overlays.

Legal risks

Relying solely on accessibility overlays as a solution for web accessibility can expose organizations to legal risks. While overlays may claim to achieve compliance with accessibility standards, they fail to meet the legal requirements for web accessibility, such as the ADA and WCAG.

No overlay product on the market can cause a website to become fully compliant with any existing accessibility standard and therefore cannot eliminate legal risk. — Overlay Fact Sheet

Companies may find themselves facing lawsuits and legal action, resulting in reputational damage and financial losses.

These potential financial losses will probably end up costing more than if accessibility was just built into the product from the start!

UsableNet’s 2021 ADA Digital Accessibility Lawsuit report found that over 400 lawsuits were filed against companies using widgets or overlays.

Many overlay companies claim that they will protect companies from lawsuits. They are lying.

Overlay Fails in Lawsuit Test: Website Accessibility Settlement Speaks Volumes |Level Access Learn more about the Murphy v. Eyebobs digital accessibility case and what organizations can take away from the…www.levelaccess.com

Overlay companies are going so far to say that the hundreds of articles and resources speaking out against them are just competitors participating in a smear campaign.

One of the best resources talking about this, Overlay Fact Sheet, has been signed by over 700 experts in the field. I highly recommend checking out the list if you’re skeptical.

“Some overlay vendors have attempted to frame the overlay factsheet as an effort by their competitors to discredit them. Such overlay claims are a textbook case of an attempt to gaslight people to deflect criticism.” — Overlay Fact Sheet

More harm than good

But… using an overlay would be better than doing nothing at all, right?

Nope.

Overlays actually create more barriers than they break down.

There are even special browser plugins, like AccessiByeBye, specifically made to block inaccessible overlays.

Is Deploying an Accessibility Overlay or Widget Better Than Doing Nothing? No, and in my view, many times it's worse.www.linkedin.com

I get it, sometimes there just isn’t enough time or budget. If you don’t have the team or resources to back up the work, it might seem hopeless. That being said, there are still things that you can do to help with accessibility.

There are a ton of accessibility checkers available online, plenty of which are free. Just keep in mind that these scanners can only do part of the job. Accessible Web estimates that these automated scanners only pick up about 20–30% of accessibility issues. Testing with real users should always be top priority whenever possible.

“Tools, like Accessible Web’s Accessible Web Helper Extension for Chrome, are designed to identify and explain simple accessibility violations on-page. Other tools, like our Accessible Web RAMP, can help teams organize remediations and maintain accessibility by automatically running scans of entire websites and sending updates as new accessibility violations emerge.” — Accessible Web