Skip to content

The Problem with Overlays

What Is an Overlay?

According to, an overlay is:

  • something laid over something else; covering.
  • a layer or decoration of something applied: an overlay of gold.

Accessibility overlays are very similar ... they are laid on top of a website. They are applications and code that lay between a website and its user. In the case of accessibility overlays, the user is often assistive technology. Accessibility overlays are often referred to as widgets, toolbars, apps, plugins, and in some cases, pop-ups.

How Do Overlays Work?

Accessibility overlays are super easy to install. A line or two of Javascript is inserted into your website code, creating a visible button on all web pages, normally in the corner of the page. When that button is clicked, the user will see a pop-up with a list of accessibility options – all this without changing the underlying code.

African American man in the background wearing a red sleeveless jersey. In the foreground is the accessibility button which is turquoise with the wheelchair users symbol in white

Accessibility Overlay Button | Miami Heat

African American man in the background wearing a red sleeveless jersey. In the foreground is the accessibility button expanded to say "Explore Your Accessibility Options"

Accessibility Overlay Mouseover Button | Miami Heat

When the users clicks the accessibility button, a menu pops up that list all the available options, each with an icon that represents. Available options are screen reader adjustment, keyboard navigation, smart navigation, blinks blocking, text reader, voice commands, color adjustments, monochrome, dark high-contrast, bright high-contrast, low saturation, high saturation, contrast mode, content adjustment, font sizing

Accessibility Overlay Pop-up | Miami Heat

How Do Overlays NOT Work?

Most of the functionality provided by overlays has little to no impact on your WCAG conformance level, nor do overlays provide any substantial legal protection.

According to a blog post on Accessibility Works, overlays “can only detect ~30% of WCAG issues in the first place. This is because the WCAG is nuanced and interpretive.” Overlays only fix the easy stuff. Here’s a sample of some WCAG criteria that overlays cannot address: keyboard traps, incorrect heading structure, misidentified language, closed captions, focus order. (See a more expansive list at The Many Pitfalls of Accessibility Overlays.)

Overlays override assistive technology. Take screen readers, for instance. People who depend on this type of assistive technology have a preferred tool they are comfortable using and have customized to how they navigate the web. They have set up their devices to meet their individual needs regarding text-to-speech, screen magnification, color contrast, etc. When an overlay is invoked, all of those settings and customizations are then unavailable.

Joe DiNero, head of the UsableNet’s User Testing group and longtime screen-reader user, has this to say about overlays:


“Using the overlay screen reader instead of my regular screen reader locks me into a small set of features such as arrow, tab and maybe heading navigation. When I use my screen reader on a regular site that has been properly coded or fixed for accessibility, I can access any form control on the screen (buttons, edit fields, aria controls, etc.), and I have the ability to pull up a list of links on the page. Moving to the overlay removes all powerful and useful features from me.”

Overlays Are Secure, Right?

Well, since overlays are scripts, with most hosted by the vendor, you open up the door to security risks and relinquish control of website performance.

In other words, if the vendor server gets hacked, your server is now at risk. If a vendor’s script runs slow, guess what?

Price Check!

Here’s some price information for the three major overlay providers and their basic plan. Both EqualWeb and TruAbilities have a free plan available.

Not a lot of money, but certainly not a lot of return on investment.

Chancey Fleet, an Affiliate-in-Residence, Data and Society Research Institute, says this about investing in overlays:


“Organizations that invest in these overlays are spending money without building the internal capacity to make their websites natively accessible, locking them in to ongoing costs without organizational progress. Even worse, overlays are often accepted by organizations as a guarantee that the websites to which they are applied will be accessible for customers and employees.

This false sense of security can lead to procurement decisions that end with inaccessible sites being deployed, with the disastrous outcomes of alienating customers, making employees less productive, and exposing organizations who bought overlays to legal liability and the unhappy task of retooling entire websites after deployment.”

Last but not least, Legal Stuff

Widgets and overlays offer no guarantees. Lawsuits filed against companies using overlays or widgets for accessibility reach one-a-day by end of 2020. More than 250 lawsuits were filed in 2020 against companies using widgets or overlays as an accessibility solution. The last 6 months of 2020 shows a significant increase in cases filed with the rate eclipsing more than one a day. Number of cases: July = 18, August = 27, September = 25, October = 32, November = 29, December = 47

Usablenet, A Record-Breaking Year for ADA Digital Accessibility Lawsuits

Overlays may appear like a magic pill that will remediate all your accessibility issues. But truly, they will never replace designing with accessibility in mind and should never be considered a permanent solution.


Maggie Vaughan, CPACC
Content Marketing Practitioner