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.
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 the legal requirements and ramifications of website accessibility 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 building a website in a popular CMS platform.
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:
- Web Accessibility Evaluation (WAVE) Tool
- ANDI Accessibility Testing Tool
- PageSpeed Insights
- BrowserStack
- accessiBe’s accessScan – You get one free audit without a free trial! But, we’re also sharing this one so you can be mindful that their end goal is to sell you an accessibility overlay.
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, 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
Check out our previous article on semantic code and why it’s important to accessibility, and stay tuned for a full checklist coming later in this series!
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
*ADA Accessibility Lawsuit Tracker Final Numbers in Digital Lawsuits for March 2024
Want to read the whole series? Check out these articles:
Part 1:How to improve accessibility for your website
Part 2: Improving website accessibility- who creates the standards?
Part 3: Semantic code- what is it, and why is it important for accessibility?
Interested in a subscription to the magazine?
Interested in a digital or print subscription to our quarterly magazine? Or are you interested in reading back issues of the magazine?
