A toolbar or plugin which claims to fix accessibility issues is known as an ‘overlay’. Among web accessibility experts, they are not held in high regard.
Why is this? Well, let’s have a look at how they work and see if that helps us understand their limitations.
What is an overlay?
Overlays give your users more accessibility options. These include text resizing, color changes, or element highlighting. They’re usually added with a line or two of JavaScript.
The user interacts with a popup on a web page to choose their accessibility options.
Your website code, the HTML, is made up of many elements and attributes. These tell your browser what content is on your page, and what form that content takes.
Overlays change elements at the browser level without changing the underlying code.
And this is where the problems begin.
How do overlays work?
The accessibility overlay talks to the server and loads a set of pre-programmed fixes. These only apply to attributes and tags on HTML elements.
This is an example of a tag;
<img/>This is an example of an attribute;
src="/my_image.png"Put them together and you get an element;
<img src="/my_image.png"/>One major drawback of overlays is that they cannot change the design or functionality of a page. This is because they only target tags, attributes, and elements.
They also work only at the browser level, so the underlying code is not changed.
What are the main issues with overlays?
There are three main areas of concern; technical, legal, and functional.
Technical
- Lack of manual testing
- Potential security risks
- Only around 20-30% of issues can be addressed
- Underlying website code is not changed
- Potential impact on page loading speeds
We always recommend combining automated accessibility testing with manual testing. Only when you adopt both approaches can you be more certain of a better experience for your users. Overlays don’t help you with any manual review of your site.
Data is transferred between your site and third-party servers, creating privacy and security risks.
Any additional scripts on your site will impact your page loading speeds. Slow-loading pages are generally considered to be bad for the user experience.
Legal
- No protection from ADA lawsuits
Getting sued under the ADA is not good for your business. The number of ADA lawsuits against websites has exploded in recent years, from 57 in 2015 to 2,285 in 2018.
Nearly every well-known online retailer – including Target, Amazon, Eyebobs, and Dominoes – have faced accessibility lawsuits. Target settled theirs for $6m. In many states, law firms are now actively searching for inaccessible websites to sue.
You can still be sued under the ADA if your site is not deemed to be accessible.
What ADA lawyers say about overlays
“It’s a good concept in theory, but the technologies aren’t advanced or mature enough” –
Paciello Group
“If your business wants to avoid getting sued under the ADA because of an inaccessible website an accessibility overlay or widget isn’t going to help you.” –
Hunt Huey PLLC
“WCAG does not reference accessibility overlays as a means of conforming.”
UsableNet
“So far, more than 100 companies have already been sued despite investing in widgets and overlays to address accessibility.”
Beckage
Functional
- Existing assistive technology is overridden
- Overlays are not mobile-device compatible
- Design and functionality are unaffected
A critical issue with accessibility overlays is that they override any existing assistive technology a visitor is using. They’re forced to change how they navigate on a per-overlay basis.
It’s a very frustrating experience for someone who uses assistive technology.
Also, overlays don’t work on mobile devices. Overlays will not help your site conform to the appropriate WCAG 2.1. standards that address mobile accessibility.
Overlays cannot change how your website functions. If you have a moving carousel that can’t be paused, an overlay won’t make it accessible.
Should you use accessibility overlays?
The evidence is clear. They don’t work.
Overlays do not modify the underlying website code. This is important because their main selling point is also the main reason not to use them.
You’ve not fixed the issue, you’ve simply masked it. Or at least, tried to.
At Silktide, we’re often asked if we can build one. In all good conscience, we won’t, because we understand their limitations.
You’d be better off fixing the underlying accessibility issues using a combination of automated and manual tests.
Automated tests are great for giving you a broad sweep of issues across the entire web estate. They do have their limitations – they can only test for unambiguous WCAG 2.1 criteria.
However, they will help you save time and identify and fix wide-ranging problems. They can also identify areas that you should check manually.
They’ll also allow you to monitor ongoing problems, which is critical when you have thousands of pages of changing content.
Manual testing should always be undertaken in parallel on a smaller sub-set of pages and themes.
Combining these two approaches is the best way to make your site accessible for everyone.
