You've probably come across them on a website: a button or dropdown menu with an icon of a wheelchair or an eye and the label Accessibility. Behind such a button, you'll find various accessibility options, such as a text-to-speech function, an option to increase text size, or a layout setting to make the text dyslexia-friendly.
This kind of menu is called an accessibility overlay tool — or simply an overlay. But do these overlays actually do what they promise, and are there any alternatives? We explore this in this article.
Overlays: Miracle cure or window dressing?
Overlays are (external) scripts or plugins that a website owner can add to an existing website. They have catchy names like AccessiBe, EqualWeb, MaxAccess or UserWay. Some overlays are free, but most tools require the website owner to subscribe.
Some of these SaaS providers (SaaS stands for Software as a Service) claim that you only need to add a single line of code to a webpage, and you’ll be rid of all your accessibility issues (and even legal risks!). Spoiler alert: these are very dangerous claims. Because there are quite a few misconceptions and controversies surrounding overlays, we dive into what overlays can actually do in this article.
And since providers of overlay tools are increasingly using this trick, we will also explore what AI (Artificial Intelligence) can mean for automatically solving accessibility problems on websites.
Not all overlays are created equal
Broadly, we distinguish between two types of overlays:
- A user menu that allows visitors to adjust text or background colours, increase text size or enable text-to-speech. Such overlays are only useful when the website itself is already fairly accessible, but providers often fail to mention this. We refer to these overlays in this article as classic overlays.
- Overlays that are mostly invisible to the user but attempt to automatically fix underlying accessibility problems on inaccessible websites. Providers of such tools often claim that AI can be used to make a site conformant with the requirements of the Web Content Accessibility Guidelines (WCAG) or the Americans with Disabilities Act (ADA). We will refer to this type of overlay as AI overlays.
Additionally, there are hybrid forms on the market that combine the features of classic overlays with AI functionalities.
Finally, some providers employ human experts (web developers) to inject custom code into an existing website to fix specific accessibility problems. This approach is quite different from what traditional overlays offer, and we will not delve further into this in this article.
The classic overlay
In the screenshot below, you can see part of the settings offered by the Fluid Project's UI Option. This overlay is free.
With UI Options, a visitor to your website can make various adjustments:
- change the font size,
- choose a different font,
- adjust the spacing between paragraphs,
- set different colours for text and background (chosen from a limited list of colour combinations like white on black, and vice versa, or black on yellow, and vice versa),
- insert a table of contents,
- make input fields and buttons stand out more.
The example comes from the GPII Developer Space, where you can try it out yourself.
Overlays versus what browsers can already do
Most overlays can do much more. For example, they can also automatically create higher contrast between text and background. But strictly speaking, you don’t need an overlay for that. All browsers and operating systems have allowed users to adjust colour and contrast settings for years. Browser extensions can offer even more adjustments. Overlay tools don’t bring anything new here.
In fact, if a user needs higher contrast or larger text, it can be expected that they will need it on all websites, and it’s much more logical to set this once rather than on each website individually. On the other hand, users who are less technically skilled may not know about these options.
AI overlays
The developers of some overlays claim that websites can fully conform to WCAG or comply with Section 508 thanks to the AI built into their tools. With AI, the issues could not only be automatically found but even automatically repaired.
These claims have received a lot of criticism from accessibility experts. Karl Groves' Overlay Fact Sheet explains why these claims are unrealistic. Hundreds of accessibility experts, including most of Eleven Ways' consultants, have signed this fact sheet.
Later in the article, under AI To the Rescue, we explore the possibilities of AI further.
Criticism of overlays
We shouldn’t generalise all overlays. This article is not a comparative test, and we don’t pass judgment on the claims some providers make. We leave that to others, but what is certain is that open criticism of specific overlays has unfortunately led to several lawsuits:
Not only accessibility experts are critical of these tools. Individuals with disabilities and organizations representing them have often expressed criticism as well. One of them is the deafblind activist Haben Girma. The National Federation of the Blind in the United States and the European Disability Forum (EDF) have also rejected misleading statements about what overlays can do.
Bye bye overlays?
For users who find overlay tools very annoying or who experience conflicts — yes, that can happen! — with a “real” screen reader, there is the browser extension AccessiByeBye that disables a specific extension. You’ve probably noticed the irony of the existence of this extension.
Traditional accessibility checkers versus overlays
Traditional accessibility checkers such as browser extensions (think Axe or Wave) or bookmarklets detect violations of at most 30% of the success criteria in WCAG 2.2 (see for example Automated WCAG Testing is Not Enough for Web Accessibility ADA Compliance).
This does not mean that they can’t detect more than 30% of the actual errors, as for some criteria, the error rate is much higher than for others. At Eleven Ways, we have experience with several of these checkers and know their limitations.
Here are a few examples.
- An automated checker can easily detect that an image has an alt text alternative (e.g., by the absence of the alt attribute). What a checker does not know is whether the found alt text is effectively appropriate for the image or suitable for the image's context. These are violations of success criterion 1.1.1 Non-text content.
- Most checkers can detect when the contrast between a piece of text and the background is too low. This is a violation of success criterion 1.4.3 Contrast (Minimum). But the same checkers struggle with checking contrasts when the background is semi-transparent or uses a gradient. And they still can’t reliably detect contrast between a UI element and the surrounding background colour (for success criterion 1.4.11 Non-text Contrast).
- Some checkers help accessibility experts by visualising the keyboard tab order on a page. This is useful for evaluating success criterion 2.4.3 Focus Order. But confirming that the keyboard tab order on a page is logical still requires human expertise.
- Accessibility checkers can detect that a page contains a YouTube video, but not whether that video has (quality) captions for deaf and hard of hearing users (success criterion 1.2.2 Captions (Prerecorded)), nor whether audio description is needed (success criterion 1.2.5 Audio Description (Prerecorded)).
- Accessibility checkers do not verify the quality of captions for deaf and hard of hearing users. Automatically generated captions, like those from YouTube, do not meet the requirements for proper captioning.
Don’t fall into the trap
Since an automatic checker can detect violations against no more than 30% of WCAG's requirements, most requirements must be tested manually. It wouldn’t make sense to think or claim that there are tools that can solve more problems than they can detect. Yet, that’s exactly what some overlay providers claim on their websites.
AI to the rescue?
We can't ignore it: artificial intelligence (AI) is ubiquitous. The technology offers incredible potential to make the digital world more accessible. However, AI is not a magic solution to make existing websites and apps accessible with the push of a button. Anyone who tries this is taking a big risk!
AI sees what you don’t see... Or does it?
One of the most striking features of AI for people with visual impairments is that AI can "see". So one might expect that editors no longer need to manually describe images on websites.
However, images in user interfaces can serve various functions. An AI cannot always determine whether an image is decorative or not and struggles to understand the function (and therefore describe) icons and graphical buttons. Describing complex images like infographics is also challenging for AI tools, as research by Adrian Roselli in January 2023 revealed.
In short: just because AI computer vision can describe an image in great detail, it doesn’t mean that AI can come up with clear, concise, and meaningful text alternatives. For this reason, and because AI still often fails in other areas, unthinkingly trusting AI can actually worsen the inaccessibility of a website. Be cautious!
Artificial intelligence has developed significantly in recent years, but in the meantime, both WCAG 2.1 (2018) and WCAG 2.2 (2023) have added success criteria that are even more difficult to automate than the original WCAG 2.0 criteria. This applies, for example, to success criterion 1.3.5 Identify Input Purpose, where the tool would need to know whether the form is asking for the user's own data or intended for entering data about someone else.
In the European Union, the current standard for accessibility of public websites is not WCAG but EN 301 549. This standard is partly based on WCAG but adds its own criteria that are even more difficult to automate than those in WCAG 2.1.
At this moment, AI-based overlay tools cannot bridge the gap between traditional accessibility checkers (which don’t claim to improve a site) and full compliance with current accessibility standards. Claims by some overlay providers that they can do this are therefore exaggerated and misleading.
In the European Union, such AI tools must work not only for English-language websites but for all languages with official status in the EU. These are not only the 24 official EU languages but also languages that have official status in member states without being official EU languages. Currently, these are Luxembourgish and Turkish. Even ChatGPT does not know all these languages.
What’s a better approach?
An overlay tool only tackles (some) symptoms of poor accessibility, but the root cause is not addressed.
To consistently produce accessible web pages, an internal change process is needed, such as the one described in ISO 30071-1. Based on this standard, you develop competence in inclusive design through five steps:
- Raise awareness around accessibility in your organization. Explain why Inclusive Design is important and what benefits it brings.
- Make inclusion a core value and develop a strategy. Ensure that all employees understand their role and provide training.
- Develop consistent processes for designing and developing inclusive digital products. Focus on repeatable methods instead of simple checklists.
- Measure the effectiveness of your new approach. Use compliance audits, but also test with real users.
- Stay informed about technological developments affecting accessibility. Adapt your approach as needed.
It is essential to work with professionals who have experience in inclusive design and accessibility. Our accessibility and inclusive design experts will help you develop a sustainable strategy, integrating accessibility into every step of the design and development process. With our guidance, you can ensure that your website not only meets legal requirements but is also truly user-friendly for everyone.
Conclusion
Accessibility overlays can be a temporary solution to some accessibility issues, but they never offer a full or complete solution. Moreover, they do not ensure that a site is fully conformant. At Eleven Ways, we believe in a structural and sustainable approach to digital accessibility. Instead of superficial solutions like overlays, we focus on integrating accessibility into the core of the design and development process. We guide organizations through this process, from awareness, audits, and training to strategic advice and the development of consistent processes that lead to digital products that are truly accessible to everyone.
Article by Christophe Strobbe and Roel Van Gils
