Tech Content
Website accessibility overlays are becoming increasingly common because of the quick and easy accessibility fix they are often promised to provide. However, they not only fail to serve assistive technology users with an effective user experience but also fail to protect website owners from litigation, which is often a principle premise for their usage. At the AFB Talent Lab, we strongly recommend that you do not use any third-party scripts to try to fix your site’s underlying accessibility issues. It might sound like a good solution, but as with many shortcuts, it’s absolutely too good to be true.
What Are Accessibility Overlays?
These third party scripts, which are often called “accessibility overlays,” try to detect and fix accessibility problems through AI or machine learning, taking a guess at the high-level tags and attributes, and then injecting code to fix things like adding alt attributes. They might also add buttons to change font size, add missing alt text for images, add labels for menus and controls, or turn on a screen reader accessibility mode.
The accessibility overlays can either be automatically activated or need to be turned on by the user, which is typically an accessibility button that a user needs to be able to find and activate, which may or may not be possible for some users.
These are automated software solutions which can only detect a very small percentage of the Web Content Accessibility (WCAG) issues in the first place. This is because the WCAG guidelines are distinct and interpretive, and computers are not very good at that.
The accessibility overlays add a layer over the inaccessible website code that have failed to address the accessibility issues. They sometimes “fix” the easy stuff but often leave many high-impact issues unaddressed to claim actual WCAG compliance. And remember, the fix is only applied to the overlay script and not to the underlying code, making your website no more accessible than before the overlay adoption.
Common Promises and Pitfalls
Overlays often guarantee that your website will be 100% ADA and WCAG 2.1 compliant. As a result, they most commonly apply the following attempted improvements:
- Changing color contrast
- Fixing images without alt text by using Artificial Intelligence to add alt tags by interpreting images and creating a label to describe them
- Fixing unlabeled buttons
In reality, since these overlays are automated and, therefore, lack manual testing and remediation, they often miss more than 70% of WCAG guidelines which can only be assessed through manual testing.
The accessibility overlays largely fail to fix issues such as the following:
- Ambiguous link text
- Unlabeled/mislabeled form fields
- Consistent and meaningful alt text for images
- Incorrect heading structure
The main problem when implementing accessibility fixes through overlays is that if you cannot accurately test for it, you cannot accurately fix it, and there are entire swaths of accessibility problems that can be detected but cannot be fixed, cannot be fixed reliably, or are not fixable without a serious performance hit. For example, through overlays, links without anchor text and form elements without labels are detectable but not reliably fixable. Images without meaningful text alternatives are detectable but not reliably fixable and not fixable without impacting performance. Improper heading structures are detectable but not fixable without risking altering design, etc.
And so, the accuracy and usefulness of these overlays when combined with the user’s assistive technology tools such as a screen reader is very low as these accessibility overlays often override the settings of users’ existing assistive technology software, which makes things more difficult and complicated for the user. This is significant and often poses a serious barrier for the assistive technology users. In addition, the privacy of third-party accessibility overlays is also not clear because these overlays potentially allow a third party that we have no control over to manipulate the user experience and can potentially collect sensitive information.
These accessibility overlays can also break your website completely by applying automatic fixes to the few issues mentioned above, which means risking your website’s user interface as changing the structure impacts how the page is being rendered. Though some vendors do claim to provide manual testing and remediation, often the remediation is only applied to the overlay script and not to the inaccessible underlying code. If the overlay is blocked by the user, the inaccessible underlying code is fully exposed.
What should I do instead?
Unfortunately, the accessibility overlays generally don’t fix many issues, and they can even make things significantly worse. Only a small subset of problems can be detected automatically, and many of those still require human judgment to evaluate. We’ve also seen some examples where the overlay UI controls themselves were inaccessible.
The best way to improve your site’s accessibility is to build accessibility into your processes. Use the guidelines provided by WCAG2.1, Section 508, etc. to fix accessibility related problems at the source. Manual testing is also an invaluable part of the process. Make sure your design engineers, software developers, and content editors are knowledgeable about developing and creating accessible and inclusive content from the start. Here are a few easy tips you can implement to start evaluating your website’s accessibility, and for getting started with accessibility. Your users will thank you!
About AFB Talent Lab
The AFB Talent Lab aims to meet the accessibility needs of the tech industry – and millions of people living with disabilities – through a unique combination of hands-on training, mentorship, and consulting services, created and developed by our own digital inclusion experts. To learn more about our internship and apprenticeship programs or our client services, please visit our website at www.afb.org/talentlab.
