The Issue with Website Accessibility Overlays

Author

Erica Martin
May 23, 2024

We’re seeing many trends this year with artisans considering building their own websites.  I’m writing a series this year for Handmade Seller to share an often overlooked area of website technology- accessibility. This is a topic that many people don’t fully understand.  This series will help you understand what’s behind the topic of accessibility, what different platforms have to offer to meet accessibility guidelines, and how to help you make the decisions that make the most sense for your business. This month, we are digging into the topic of accessibility overlays.

laptop computer

We’re going to start this article off with an uncomfortable statistic: There were 427 ADA accessibility lawsuits filed in March 2024, and 101 were defendants using a 3rd party accessibility related control (widget)*. 23.65% thought they were utilizing a viable tool to make their website more accessible, when in fact, it did not.

This is why it’s critical – even as a small business – to try and understand How to improve accessibility for your website as well as follow best practices from the start.

What Does an Accessibility Widget Do?

Accessibility widgets/overlays/add-ons/aids (or whatever you want to call them) are third-party tools intended to improve the accessibility on your website without you needing to restructure any code.

They offer a variety of features to solve issues like:

  • Poor contrast ratios between text and background colors

  • Fonts that may be to small, or too thin, for low-vision readers

  • Missing, alternative text to images or title attributes to links

  • Focus indicators to visually highlight where the user is on the website

  • Compatibility with assistive devices

Here’s Why Overlays Are Problematic

Most accessibility tools are automated software solutions that claim to detect and “fix” accessibility issues. Instead, they only sell the perception of accessibility.  Their technology only provides a band-aid solution, while the underlying code remains unchanged.

If you’re shopping for an accessibility solution, hoping this will be the one that actually works, then here are some jazzy buzzwords** to be weary of:

  • Total Web Accessibility Solution

  • Effortless and Immediate

  • Fully Automated

  • Artificial Intelligence-Powered (AI)

  • Instant Solution

  • Single Line of Code

It’s also important to note that these overlay tools leverage user data in order to function, adding to growing concerns of data privacy**.

Better Alternatives to Overlays (and Widgets)

As a busy business owner, of course we all want a one-stop solution that will solve all of your accessibility concerns. Click. Pay. Download. Done. Now your website is perfectly accessible to everyone!

Since it doesn’t work that way, you’ll have to be a bit more hands-on in your approach to creating and maintaining an accessible website.

Build Your Website with Semantic Code… From the Start

You probably already know what we’ll say: The number one solution is to incorporate accessibility best practices as you’re building your website. Buuut we know that isn’t always feasible, especially when you’re addressing Website accessibility in Popular Platforms.

Aim to Make Your Site More Accessible with a Website Audit

The next best solution is to perform an audit using online accessibility testing tools. They’ll provide various user simulations, then report the results detailing what could be modified to meet specific WCAG standards. You’ll still be the one implementing changes, but it’s helpful to have a guide on where to get started.

A few examples are:

We recommend running more than one report to get a better understanding of where you’re starting from. Then, you can try to fix the things you have control over to the best of your ability. This would include fixing semantic elements- which were used to build your website- read more inSemantic Code- what is it and why is it important for accessibility? , such as:

  • Adding alt text to all images

  • Using ARIA labels to label interactive elements

  • Ensuring you’re using buttons and anchor links as they’re intended to be used …And adding title attributes to each

  • Removing excess <div> and <span> tags 

CONCLUSION

Members of the website accessibility community created this overlay fact sheet***. Their statement breaks down this same conversation, but in significantly more detail:

“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

Unfortunately, any website accessibility software that prides itself as being a one-stop-shop is just too good to be true. 

Citations