TLDR; Accessibility overlays are literally the worst thing you can do for web accessibility.
Web accessibility in 2 lines of code?
An accessibility overlay (sometimes called an accessibility widget) is a piece of software that promises to make your website accessible without you lifting a finger. They let users change accessibility settings while on your website and customize the browsing experience.
All you need to do is add it to your website through a couple of lines of code and boom! your website is accessible!
Isn’t it?
Everybody loves quick and easy solutions. But unfortunately, website accessibility isn’t that simple.
Accessibility overlays promise to make websites more accessible, but in truth, they masquerade as a silver bullet to prevent accessibility lawsuits. And they don’t even keep you safe from that.
But perhaps we’re being harsh. Maybe overlays do work?
Video Transcript
An accessibility overlay is a piece of software that gives website visitors a bunch of accessibility settings. It’s a simple add-on that claims to give users all the control they need to make their browsing experience better. To implement this, web developers simply drop a line of code into their website build, and… Hey presto! That website is now accessible… apparently.
Everybody loves quick and easy solutions. Diet pills and hair loss shampoos are still popular despite their questionable efficacy. So when overlays sell themselves on the idea of being quick and easy… whose plight are they speaking to? Are we really thinking about the users who depend on accessibility, or the convenience of those looking to implement it?
Hey, maybe it’s not that bad. Maybe we’ve found a quick fix solution that actually works. If overlays do make websites more accessible, don’t the ends justify the means?
Let’s start with the big one. There are two major standards when it comes to web accessibility. First is the web content accessibility guidelines; a resource for making websites accessible, and if you’re in the public sector in the EU or the UK, a legal requirement. The ADA is the Americans with Disabilities Act, which is a broad federal law that protects people with disabilities. Now, despite what you may have heard, overlays don’t comply with either of these.
There are countless criteria that overlays don’t address, such as mobile compatibility and PDF documents, but even the issues they do address are unreliable. Take for example the settings for reducing motion. Ideally, websites should apply the CSS media query ‘prefers-reduced-motion’ where needed, to honor the users who have that preference enabled on their system. Sadly, overlays don’t implement this. Instead they attempt to freeze everything themselves, but this can produce more harmful results. I invite you to try this on websites that have a lot of motion and an overlay, and see what the effects are.
[carousels can break, videos can become unplayable, animated transitions can become even flashier…]
Another problem is when overlays attempt to generate things like headings and alternative text automatically. A machine might be smart enough to identify the contents of an image:
“Image: men in a boat”
What it won’t provide is the context:
“Image: George Washington crosses the Delaware river in 1766”
Do you see how the last one is more informative?
[“All non-text content that is presented to the user has a text alternative that serves the equivalent purpose” – WCAG 2.1 Non-Text Content 1.1.1 Level A]
Compliance means making sure that users are not deprived of any information due to how they access the content. With overlays, you simply can’t guarantee they can do this.
Okay, so they’re not compliant, but do they actually help people? Well, a survey from accessibility group WebAIM says that most disabled users don’t find overlays very effective.
[72%, only 2.4% find them effective]
In fact, this sentiment is widespread across accessibility spaces.
[levelaccess.com, shouldiuseanaccessibilityoverlay.com]
There’s even an open letter signed by accessibility advocates opposing the use of overlays.
[overlayfactsheet.com]
And they’re not just targeting a single one. There are lots of overlays out there, and visiting a website is rolling the dice on which you’ll encounter. But that’s another problem. The user has to navigate to the overlay menu and apply their preferred settings… Every. Single. Time. If you’ve ever been annoyed with cookie pop-ups, you can imagine this process to be not just frustrating, but physically exhausting. More complexity means less accessibility.
Now you might be thinking “So overlays aren’t perfect. Surely they’re better than nothing?” Are you ready for this next one? You already have these options in your operating system. I’m not kidding. Zooming into the page? You can do that with your keyboard. Larger text? Every operating system lets you do this. Cursor size?!
Here’s the thing. Users who depend on these features will already have them enabled, and overlays will try to overwrite them with their own settings. It would be like walking into a supermarket, and a member of staff takes away your iPhone, and replaces it with an Android phone (or vice-versa if you use Android <3). Now you’re fumbling with a new device, and the establishment itself has not been made any more accessible.
A practice like this may not be helpful, but it is performative. Websites wear accessibility overlays like a badge of honour, to show the world how much they care about accessibility. Overlay providers are aware of this, and will sometimes include it as part of their pitch.
Now why would a website ever seek to improve if it believes it’s done everything it needs? This complacency is dangerous. Overlays don’t solve everything, and even what they claim to solve doesn’t always work. As mentioned before, reduced motion settings can have unreliable results, and even something simple like changing the text size can make the website totally unreadable, because overlays don’t reformat the page.
This comes down to our final point. Overlays might call themselves a code-free-solution, but their main selling point is exactly why you shouldn’t use them. The underlying code is what makes or breaks a website. It makes it mobile friendly. It makes it work with assistive technology. It makes it functional.
Accessibility is all about functionality, which is why websites need to be developed with accessibility in mind, not as an afterthought.
Overlays are an afterthought. They create problems, they resell features that everyone already has, and they don’t make websites compliant. So… Do they even work?
[Perkins Access: “Regardless of what they claim, overlays simply can’t bring a website into full ADA compliance or ensure that it meets all WCAG requirements”]
[Haben Girma: “Beware of companies claiming to use AI solutions to make websites accessible”]
[Forbes: Largest U.S. Blind Advocacy Group Bans Web Accessibility Overlay Giant […] From Its National Convention]
Accessibility groups and influencers have been outspoken about the overlay problem. Even more broader publications have shed light on the issue, and yet websites still use them. While companies think they’re saving money by supporting them, it’s the users who are paying the price.
You don’t need to be preached to about the importance of accessibility. We just need to agree on a solution that works for everyone, and this means listening to what the community is saying.
[Web Accessibility Education: Basically, [overlays] are terrible. Don’t use them.]
Web accessibility is complicated. This means it requires some work, but it’s work that ensures that no internet user is left behind.
Do accessibility overlays make my website legally compliant?
Legal requirements for website accessibility are different depending on a multitude of factors. These include where you are in the world, and whether you are in the public or private sector. But let’s make it simple. In the US, websites must adhere to the Americans with Disabilities Act (ADA) which requires websites to be accessible to users with disabilities. Yet the standard they need to reach to be considered accessible is unclear.
The Web Content Accessibility Guidelines (WCAG) is a series of guidelines for website accessibility, and generally, most of the world agrees WCAG is the universal standard to follow. Some laws specifically reference WCAG, and others do not. But even the Department of Justice references WCAG during ADA breach lawsuits.
Now for the kicker.
Despite what you may have heard, overlays do not comply with the ADA or most other accessibility laws across the world. They simply don’t meet WCAG standards.
There are countless criteria that overlays don’t address, such as mobile compatibility and PDF documents, but even the issues they do address are unreliable. Take, for example, the settings for reducing motion. Ideally, websites should apply the CSS media query ‘prefers-reduced-motion’ where needed.
Overlays don’t implement this. Instead, they attempt to pause everything themselves, which can produce more harmful results.
What all this means is that accessibility overlays do not and will not protect your website from accessibility lawsuits. Why? Because they don’t make your website accessible.
Automated content generation in accessibility overlays
Accessibility overlays can attempt to generate content such as headings and alternative text automatically. While a machine might be smart enough to identify the contents of an image, what it won’t provide is the context.
For example, an accessibility overlay might try to generate alt text for the image below as “Image: Men in a boat.”
But is that really helpful?
Instead, here’s some alt text we’ve written that includes the context accessibility overlays simply can’t generate.
“Image: Painting of George Washington crossing the Delaware river in 1766”
Do you see how that is more informative?
Compliance means making sure that users are not deprived of any information due to how they access the content. With overlays, you simply can’t guarantee they will do this. You can read our article on writing better alt text if you’d like to know more.
Do accessibility overlays actually help?
Okay, so accessibility overlays are not compliant, but do they actually help people? Well, a survey from the accessibility group WebAIM found that only 2.4% of disabled users found overlays effective.
In fact, this sentiment is widespread across accessibility spaces. There’s even an open letter signed by accessibility advocates opposing the use of overlays.
And they’re not just targeting a single overlay. There are lots of overlays out there. Visiting a website is rolling the dice on which accessibility plugin you’ll encounter in the bottom corner of your screen. But that’s another problem. The user has to navigate to the overlay menu and apply their preferred settings. Every time.
If you’ve ever been annoyed with pop-ups, chat bubbles, and cookie banners littering your screen, you can imagine how difficult it can be to close them without using a mouse or being able to see the screen. This process is not only frustrating but exhausting.
More complexity means less accessibility.
Are accessibility overlays better than nothing?
You might be thinking “So overlays aren’t perfect. Surely they’re better than nothing?” Well, no. Ready for the big twist? Your operating system or web browser already has all of the options that you’ll see in accessibility overlays.
Zooming into the page? You can do that with your keyboard. Larger text? Every operating system lets you do this. Cursor size? Yes.
Here’s the thing. Users who depend on these features will already have them enabled, and overlays will try to overwrite them with their own settings. This means that accessibility overlays don’t make websites any more accessible, they only put barriers up to people who have their own accessibility configurations.
A practice like this may not be helpful, but it is performative. Websites wear accessibility overlays like a badge of honor, to show the world how much they care about accessibility. Overlay providers are aware of this, and will sometimes include it as part of their pitch.
Overlays don’t solve everything, and even what they claim to solve doesn’t always work. Even something simple like changing the text size can make the website unreadable since overlays don’t reformat the page.
Are accessibility overlays a good code-free solution?
This comes down to our final point. Accessibility overlays might call themselves a code-free solution, but their main selling point is why they don’t work. The underlying code is what makes or breaks a website. It makes it mobile-friendly. It makes it work with assistive technology. It makes it functional.
If overlays don’t change your website’s code, then how can they possibly fix any accessibility issues in your website’s code?
Overlays create problems and resell features that everyone already has. And they don’t make websites compliant with accessibility legislation. And it’s not just us who thinks they suck.
Do accessibility overlays actually work?
In short, no. But don’t just take it from us. People in the accessibility community strongly warn and advise against accessibility overlays.
Regardless of what they claim, overlays simply can’t bring a website into full ADA compliance or ensure that it meets all WCAG requirements.
Perkins Access
Beware of companies claiming to use AI solutions to make websites accessible
Haben Girma
Largest U.S. Blind Advocacy Group Bans Web Accessibility Overlay Giant From Its National Convention
Forbes
Accessibility groups and influencers have been outspoken about the accessibility overlay problem. More and more publications have shed light on the issue and yet websites still use them. While companies think they’re saving money and “doing the right thing” by supporting them, it’s the users who are paying the price.
You don’t need us to preach about the importance of website accessibility. We just need to agree on a solution that works for everyone, and that means listening to what the community is saying.
Basically, overlays are terrible. Don’t use them.
Web Accessibility Education