I’m about to help you not spend $50 a month

Allow me to add my voice to the growing chorus of people talking about accessibility overlays and widgets and why you should avoid them.

But first, a definition, because there’s a chance you have seen this out in the wild, but didn’t know what an overlay was. 

What is an accessibility overlay or widget?

An overlay or a widget is a line of code planted in a website that then produces a menu of accessibility options (supposedly). The menu will offer you choices like enhanced visuals or a seizure-safe view (i.e. no flashing lights).

They typically cost about $50 a month to implement and operate for your website.

The button for this menu looks like a small stick figure person with their arms raised. The menu will have options to adjust the font, operate a screen reader and reduce some distractions among other options. 

It certainly SOUNDS good. It probably even makes you FEEL good about using a website that has this feature.

Why you should avoid using an accessibility overlay

Unfortunately, though, there are many issues with this overlay situation. I’ve got a short list of some core issues and lots of resources for anyone who wants to learn more. 

Oh, and as always, I would not leave you bereft. There are lots of resources and tips in the second half of this post to help you make your eCommerce site more accessible.

What are the issues with accessibility overlays?

1. They don’t work as advertised and they slow down your site.
   Adding a third-party line of code to your website almost always slows down your website. A slower website means search engines don’t prioritize your site as highly, which means reduced traffic, which means you serve fewer people.

   And while it is true some of these tools can point out where you are missing alt text – that part at least usually works – an overlay can’t tell you if the existing alt text actually describes what is in the image, which is a core part of accessibility.

   Fun fact – before I help my clients rewrite their alt text, I have to use an automated scanner to find where all of the alt text is missing. I am not against all automation. But it still takes a human touch to tell other humans what’s in the image.

2. Overlays and widgets actively interfere with a user’s existing tools and are also redundant.

   Many if not most people who have disabilities already use tools for accessibility. Screen readers are already installed on Macs and free versions are easily downloadable for PCs. People adjust the contrast on their screens as needed using existing tools. People with fine motor disabilities tab through a site instead of using a mouse.

   In fact, many people with disabilities have very specific preferred tools installed and also have their own opinions on what works for them. Accessibility is not a one-size fits all process – it is a human process. Different people with the same disability can experience tools differently. A single overlay won’t help because it isn’t flexible ENOUGH.

   In fact, I am only touching on a handful of cases and examples of accessibility and overlays, because there are so many examples of why overlays don’t work.

   Additionally, some of these overlays will override these existing tools and make websites less accessible as UseableNet demos in this video.

3. Overlays don’t protect you from legal issues with The Americans with Disabilities Act (ADA) compliance or accessibility standards in other countries, even though they imply that they do.

   One company in particular states on its home page that they are the “#1 Web  Accessibility  Solution  for WCAG & ADA Compliance” even though its product, the overlay, does not bring you into full compliance with the ADA. In most tests, these overlays barely help with 30% compliance.

   As for the supposed legal protections, that’s mostly vibes without facts. In 2021 alone, there were over 400 lawsuits filed against companies using these widgets and overlays because the overlays were shown to not at all increase accessibility for blind people.

If you are wondering how a company gets away with making misleading claims about their product allow me to sigh deeply and then introduce you to *check notes* so many corporations. 

In this case, they get away with it because of ableism. Broadly speaking, the voices of people with disabilities and voices of people who need assistive technology are often shunted aside in favor of so-called “experts”.

So what can you do to improve web accessibility if you don’t use an overlay?

So much! There is so much that you can do on your own or with some help. And the good news is that there are a lot of free tools that can help you get started.

The best place to start is with a question – Is your goal to help the visitors to your site find their way around? This is your best starting point.

Here is a short list of tips and some tools to help you get started.

• Double-check your font size – 16 pt font is broadly considered to be the minimum font size that is readable on a website. And this is a pretty easy check and change to make.

• Make sure your hyperlinks are longer – people who have fine motor disabilities often have issues clicking on links that are too small or too short in an article.

• Use this tool to scan your website for missing alt text and then commit to rewriting it with more clear descriptions.

• I didn’t know that this needed to be said, but definitely don’t use flashing images on your site. Flashing images and lights can cause seizures. It’s also not a helpful design element for anyone and will likely send people away from your site.

• Making your website free from too many distractions is good for some people with ADHD, and it is also just a good design practice. Focus on your products and focus on having good calls to action.

• Because many of us work in a visual medium, making sure that our visuals are accessible is paramount. I talked about alt text and font size – color contrast is also important. You can use a filter to see how people with colorblindness experience your site and see if you need to increase your color contrast.

The overlay is an oversimplified “solution” to a process that is more complex, ongoing, and always changing. There is no single approach, but a multi-layered approach.

In fact, my list of tips is just there to get you started, it is by no means a comprehensive approach. Take small steps and make a big commitment and you will get there.

Much like operating an eCommerce website that never “feels done”, including accessibility in your process will also never “be done”, but it will be done better than if you went with one of those $50/month overlays.

You can start from wherever you are.

So how did I learn about all of this?

I started by getting curious! I thought about getting one of those overlays, so I did my homework. I checked out who was recommending them. Turns out, they were not being recommended by people in any legal or disability organization.

Learning to listen to the people most affected by our choices is always a good idea. In this case, listening to disability rights organizations and to people with disabilities turned up the best information, and saved me from spending that money on a useless tool.

Will future overlays will be better at addressing everything?

Maybe?

I can envision a future technology that is capable of encompassing all accessibility. In order to get there though, we will need to listen to the voices of people most affected by our technology choices. That’s the part I remain skeptical of – prove me wrong, developers.

Had you thought about installing this kind of overlay or widget on your site? Did you know about these issues before? Drop a comment and let me know!