A guide to accessibility overlays

Many organizations are seeking quick, low-cost accessibility compliance solutions to avoid litigation and ensure their website is compliant with the Americans with Disabilities Act (ADA) and Section 508. Indeed, ADA-related lawsuits around web, app, and video accessibility have increased by 23% in 2020 and the trend is expected to continue upwards, so the concern is understandable. And with the digital transformation that occurred during the pandemic, even more organizations are recognizing the urgent demand for inclusive digital experiences both for users and employees.

For many, designing for accessibility is an entirely new concept and wrapping your head around the different accessibility standards can feel overwhelming, especially considering that the standards, such as the Web Content Accessibility Guidelines (WCAG), are technical in nature. Let’s take a look at what accessibility overlay tools actually offer, what the drawbacks are, and why this approach to accessibility is inherently flawed. 

What are accessibility overlays?

Accessibility overlay tools are automated software solutions that claim to detect and fix web accessibility issues. Overlay tools work by modifying the code of a web page with a snippet of JavaScript and usually come in the form of a toolbar, plugin, app, or widget. It is important to note, however, that overlays do not typically make any changes to the website’s source code. Instead, they can detect some basic accessibility issues, such as color contrast and text size, and make modifications. There are also custom overlay solutions, which are tailor-made overlays that promise to address the shortcomings of your publishing system better than generic overlay tools. These custom solutions are specific to your site’s code, but still do not change the source code.

Why are accessibility overlays gaining popularity? 

Overlays are tempting for organizations and businesses looking for a fast and inexpensive solution to accessibility compliance. There has been a steady increase of ADA Title III lawsuits in federal court across the country each year. In 2013, the number of lawsuits was 2,722 and over time that number grew to 11,053 cases in 2019. There have also been high profile cases in the media that have brought more attention to ADA violations.

In 2016, Domino’s was sued for failure to make their website and mobile app accessible with assistive technology. In response, Domino’s appealed the case to the Supreme Court on the basis that there were no clear rules for how to make their services accessible, but their request was denied. This decision made headlines as it exemplified that lack of accessibility knowledge does not exempt businesses from the requirement to provide equal access to their products and services to people with disabilities. And in 2019, a class action lawsuit was filed against Beyoncé’s company, Parkwood Entertainment, for several accessibility issues on Beyonce.com that created barriers for visually impaired visitors.

Businesses are realizing that their websites must be accessible, whether for legal or ethical reasons, but they lack the resources or knowledge to properly address accessibility issues. They turn to overlay tools as a quick fix solution to avoid getting sued under the ADA. It sounds appealingly simple. Just insert a snippet of code and your website will be one hundred percent accessible. In practice, however, these tools are limited in scope and do not constitute a full compliance solution. 

Why you should not use accessibility overlays on your website

Many overlay solutions are used as a band-aid to cover up some accessibility issues but do not actually solve critical accessibility issues in your site’s source code. Relying on an overlay tool as a long-term fix-all solution can therefore leave you open to legal risk, since it gives a false sense of security. Websites using overlays can, and have, had lawsuits filed against them. In fact, over 250 lawsuits were filed against companies in 2020 despite their use of accessibility overlays or widgets.

Accessibility overlays prevent inclusive web experiences

Apart from the legal risks involved, overlays can create barriers for people with disabilities and how they experience a website. For starters, many overlay solutions must be activated using a button or a toolbar, which is a potential barrier if users are not able to locate the button on the web page. And even if they do manage to activate the overlay, two issues remain.

First, the problem persists that overlays do not actually address accessibility issues in the source code, which means people with disabilities could still be unable to navigate the website and access information at an equal level as everyone. The other issue is that overlays fail to adapt to a user’s specific assistive technology, such as screen readers. Users relying on assistive technology already have their devices and browsers configured to their desired settings. In some cases, overlays override these settings and force them to use the overlay.

These barriers created by overlays all add up to a poor user experience that alienates this section of your user base and leads to bad brand perception and potential loss of revenue. By using overlays, you are in essence offering people with disabilities a different web experience with reduced functionality, which is in direct contradiction with the goals of digital inclusion. Creating an inclusive web experience entails fixing accessibility issues on your primary site so that you create one accessible, homogenous brand experience.

Using accessibility overlays will hinder your website performance

Overlay tools can also diminish the performance of your website. Because overlays are scripts often hosted on a third-party vendor’s server, if the overlay script is slow to load, you will have no control over it. How much speed are you willing to give up if your overlay tool is resource intensive? Keep in mind that Google uses website speed as a ranking factor. Forty percent of visitors will leave a page after waiting for more than three seconds. Your visitors are unlikely to be understanding of a slower site experience, which can cost you serious business.

Even custom overlay solutions, which are meant to be a more tailored solution for your website, lack flexibility and can break during regular site maintenance. One small change on your website has the potential to disrupt the whole overlay. Another potential hindrance to keep in mind is that extensions designed to block ads are known to block overlays, rendering them useless. This problem is compounded by the fact that ad blockers are a common tool to block ads and pop-up content that are generally incompatible with assistive technology. 

WCAG issues not solved with accessibility overlays

There are some simple accessibility issues that overlay tools can identify and resolve, but there are also many other critical problems they cannot fix. There is simply too much complexity in the WCAG guidelines for overlay tools to provide the robust modification needed to make your website accessible. While some of these tools use basic artificial intelligence (AI) to run their checks, they are too immature to interpret the guidelines in a meaningful way, leaving big accessibility gaps across your website.

So, what issues are ignored by accessibility overlay tools?

• Missing headings or headings not being properly coded
• Missing alt text on images
• Link text marked clearly
• No labels on form fields
• Required form fields not indicated
• No submit button on form/no clear submit button label

Worryingly, most of these issues are significant barriers to web users with disabilities.

The importance of automated accessibility testing and manual testing

Digital accessibility is an ongoing process. New accessibility issues can arise as soon as you make any changes to your website, which is why it is important to test your site often. And although overlays are a tool to avoid, not all digital technology is bad. Automated web accessibility testing is an efficient and reliable way to regularly check your website for accessibility issues and stay on top of WCAG compliance. Of course, even the best automated accessibility solution will not be able to detect every single issue, since by nature, some accessibility issues can only be evaluated manually. That is why regular manual testing by accessibility experts who know what to look for is also needed. Luckily, there are reliable services that offer automated checks, manual testing, or a combination of both, depending on your accessibility goals and needs.

Build an inclusive web experience with Siteimprove

Overlays are not effective, but proper, quality automated testing for accessibility issues in your source code can make it easier for your organization to reach compliance in a sustainable way. Siteimprove has over fifteen years’ experience with web accessibility. The Siteimprove Accessibility module is developed by our in-house team of accessibility experts and provides automated testing that strictly adheres to WCAG compliance standards. ln order to fully support your accessibility compliance goals, we also offer manual testing services in certain locations.

The Siteimprove Accessibility module uses the latest Accessibility Conformance Testing (ACT) rules, which are a standardized set of test rules written by accessibility experts around the world. And through our collaboration with the World Wide Web Consortium (W3C), the world’s leading group of accessibility experts, our in-house experts actively participate in writing ACT rules, giving us unique insight into the latest developments in digital accessibility. In our module, you can expect consistent results, full documentation of all accessibility issues and guidance on how to fix the issues. Siteimprove also makes it easy to manage and prioritize issues, so your team can get a clear overview of how to reach compliance.