Accessibility Overlays. A Dangerous Shortcut.

a user placing a band-aid on a laptop screen
Sidebar
by Giannis Tzortzopoulos
9' read

Accessibility overlays are software solutions, often presented as a simple line of code, that claim to make a website instantly accessible and compliant with accessibility guidelines and legal standards. This effortless approach to web accessibility has made overlays popular among businesses seeking a quick and cost-effective way to avoid accessibility related lawsuits and meet compliance requirements. 

Here is a breakdown of what these overlays actually do:

1. They Provide Accessibility Widget Tools

This is the most common function of an overlay. It is typically implemented as a button or a widget, often with the accessibility icon as an indicator, that floats on the right side of the page. When a user clicks it, a menu of options appears. These options can include:

  • Font and Text Adjustments: Allowing users to increase text size, change the font, or adjust letter spacing.

  • Color and Contrast Changes: Offering options for high contrast or sepia modes to help users with visual impairments.

  • Cursor and Pointer Modifications: Providing larger cursors or highlighted pointers to make it easier to track on the screen.

  • Text-to-Speech: Some overlays include a built-in text-to-speech reader that can read the page content aloud.

On the surface, these features seem beneficial. However, as many experts and users have noted, they are often unnecessary. Most of these features are already integrated into browsers and operating systems. For example, users with low vision have already configured their device's high contrast mode or screen magnification to their specific needs. An overlay toolbar can conflict with these personalized settings. As stated in the study  The Promise and Pitfalls of Web Accessibility Overlays for Blind and Low Vision Users “Participants frequently reported that these overlays conflicted with their assistive technologies, leading to reduced functionality and increased frustration”.

2. They Attempt to Fix Code on the Fly

The most controversial function of overlays is their automated "AI" fix. The script scans the page and attempts to identify common accessibility issues and then applies a quick fix. For example:

  • Missing Alt Text: If an <img> element is missing an alt attribute, the overlay might try to generate one based on the image's file name or surrounding context.

  • Missing Labels: It might attempt to add an aria-label to a button or form field that lacks a proper label.

  • ARIA Roles: It might apply ARIA roles or states to non-semantic elements like a div that is being used as a button.

This automated audit and remediation is where the most significant problems arise. An AI function cannot understand the true purpose of an image to write accurate alternative text, and it cannot fix complex navigation issues and invalid heading structures. It cannot test and apply proper keyboard navigation or evaluate error messages and how they assist users in filling invalid form fields. Human expert evaluation and remediation are still to this day essential for discovering and fixing accessibility issues.

3. They Interfere with a User's Existing Technology

For users with disabilities, their assistive technology (AT) is an everyday tool customized according to each person's needs. It is a personalized experience of how they navigate the digital world. An overlay can disrupt this interaction between users and their assistive technology.

  • Overlays can add code, causing the screen reader to announce confusing, redundant information with no value to users.

  • The overlay's keyboard shortcuts can conflict with the user's existing shortcuts, making keyboard navigation difficult or even impossible.

  • Overlays can also override or interfere with the native accessibility features built into the website by the website’s developers. A false positive issue detected by the AI may interfere with the developer’s original intention for this element.

4. They Create a False Sense of Security

By providing a visual toolbar and claiming to fix issues, accessibility overlays give website owners a false sense of security. They believe they are compliant and protected from lawsuits. However, the truth is that the website is still not compliant if all parts of accessibility auditing and remediation are done by an overlay. Harsh reality and statistics show that a significant number of digital accessibility lawsuits are now filed against websites that are actively using overlays. This is highly proven by the $1 million fine that the US Federal Trade Commission (FTC)  ordered against a major overlay provider for deceptive advertising, specifically for making false claims that its AI product could make a website compliant with accessibility guidelines.

Accessibility Overlay Fact Sheet

Overlay Fact Sheet is an open statement created by a group of accessibility professionals, lawyers, users with disabilities, and supporting organizations. The document provides a detailed analysis of what web accessibility overlays are, what they can and cannot do, and why they are not considered a reliable solution for making websites, apps and other digital products accessible.

The purpose of the Overlay Fact Sheet is to:

  • Inform: It provides clear information to help people understand the risks and limitations of using accessibility overlays.

  • Make a Difference: It is a statement from the accessibility community, taking a collective stance against the use of overlays as a primary solution for accessibility.

  • Protect: It was created in part to help accessibility critics share information without fear of legal threats from overlay companies. It contains real quotes from people with disabilities about their digital experiences with overlays.

In conclusion, when it comes to web accessibility, there are no real shortcuts. A truly accessible digital product cannot be implemented through a quick fix, but as a result of a solid methodology and process. The only reliable path to accessible digital products is the combination of using automated testing tools, human expert evaluation (manual expert audits), usability testing with real users with disabilities, and remediation done by experts or product teams who are trained in web accessibility practices.

Do not forget: Web and digital accessibility is a long and rewarding journey that cannot be approached with quick and sloppy “solutions”.