Considering an accessibility overlay? Think twice.

Overlay products should not be a long-term solution for accessibility

A close up of the character's shoes and a white cane, a visually impaired person walking outdoor

On and off for several years, an accessibility overlay company tried to woo us and asked us to try their product. The company claimed that its product would solve the accessibility issues of the websites we designed and built and would be a great value-add to our client work.

We declined.

That probably sounds crazy — why would an agency that talks about and understands accessibility not use a product that would benefit its clients? The answer is — sometimes products are too good to be true.

Accessibility = Great UX

Accessibility is a best practice for usability — a hallmark of a great user experience. Google considers accessibility in its algorithm, and it’s a legal requirement as well. Foregoing standard accessibility can earn you fines and warnings from the ADA (Americans with Disabilities Act) that can cost time and money — not just to pay but also to go back into the product and fix.

Tools that promise to make a website accessible can be really tempting for companies. These tools promise that websites can quickly help people with disabilities access the product.

But despite these claims, hundreds of lawsuits have been filed against websites that use accessibility overlays. The reason? Because even with an overlay, the sites still fail to meet ADA standards. The truth is, accessibility overlays have a limited scope — they can’t possibly address every accessibility issue in a compliant way.

How does an accessibility overlay work?

Accessibility overlays come in two forms. The most common is javascript-based code which modifies a website page after it has been rendered. Another form is a tool-based overlay, which targets a specific accessibility issue on a page and provides options for the user to control.

For the able-bodied user, these options can appear to give user control of the accessibility of the website. However, these surface level changes often do not fix the underlying accessibility issues, and can even complicate the usability.

The downsides of accessibility overlays

Asian woman with blindness disability using computer with refreshable braille display or braille terminal a technology assistive device for persons with visual impairment in workplace.Interfering with robust accessibility tools

Tool overlays can cause more problems for users who need accessibility tools. Users can already fix many of the problems these products solve with their own, more robust accessibility tools. While accessibility overlays allow users to adjust text size, change color contrast, or adjust navigation, they can override the users’ own more robust tools. This ultimately downgrades a user’s experience.

In fact, Nielsen Norman Group conducted testing to understand the experience for screen readers on mobile, finding that accessibility menus were not useful for the participants in the study. Participants didn’t choose to open the tool, and when they were asked, they indicated the tools were redundant and restrictive.

Posing as a security risk

Overlays are considered a third party add-on or plugin. They introduce code developed by someone else to a website. Because overlays are not built into the core of the website, they can create another avenue for security risk. Code made to override user controls and settings can be dangerous if compromised, and the product can become a liability.

Causing a drop in performance

Additional javascript that is injected into a website can cause a drop in performance. The website may run slower, often risking crashing the users’ platform. If users have older devices, an accessibility overlay may make the product unusable, let alone inaccessible.

Giving unreliable results

Accessible websites include image descriptions and component landmarks so that screen readers can read the content without causing confusion. However, accessibility overlays cannot consistently add accurate alt text for images or correctly add the appropriate landmarks with usable hierarchy.

The WCAG is complex. Here are the areas accessibility overlays can’t address:

  • When headings are missing or not properly coded
  • When image alt text is missing
  • When link text isn’t marked clearly
  • When form fields are missing labels
  • When required fields aren’t clearly marked
  • When a form is missing a submit button or the label isn’t clear

How to fix accessibility issues

Accessibility issues need to be fixed within the design and code itself in order to be accessible. Overlays can make a temporary and generalized patch. However, they address the general symptoms of an inaccessible product rather than creating a sustainable base for users.

Time for an accessibility audit

Accessibility audits can pinpoint areas of a product that need improvement. Products such as Axe can scan a webpage and give detailed reports on problematic areas, including incorrect hierarchy, lack of contrast, missing landmarks.

Audit tools can show exact lines of code that need fixing, as well as general recommendations. For a more comprehensive report, experts can conduct an audit for not only a more detailed report of areas that need fixing, but tailored recommendations.

Fix accessibility for long-term benefits

Making the fixes may seem like an overall loss of time and money; however, studies show tackling the problems earlier than later can save the time and money it would cost to recreate a product from the ground up. Putting off fixes in favor of a fast-patch accessibility overlay can also lead to lawsuits, product bans, and fines. The faster accessibility issues are tackled and resolved, the less damage they will do in the long run.

Understanding the various accessibility needs of others can help create a usable space before damaging the brand and finances. On a surface level, this may look like larger text and higher contrast. Yet this only covers a small part of accessibility.

Accessibility also addresses mobility, interactive content, and video. Inaccessible sites that are difficult to use without a mouse, lack descriptive actions (such as every button, regardless of action, says “Read More”), and lack video transcripts cannot be fixed with an overlay.

The internet holds a vast amount of tips and rules for designing and developing accessible digital products. The most effective method for creating an accessible product is to talk directly with end users – users with disabilities who will be using the product. An able-bodied person can only account for so many usability issues, and they will have blank spots in their knowledge that a user with disabilities understand as a part of their daily lives.

What to do now

When you increase your awareness of a wide range of user needs, it not only helps a product avoid lawsuits and potential fines, but also opens the door for more people to enjoy the product.

Overlays are seen as a quick and lazy fix, especially to users with disabilities who find their experience more frustrating than without the overlay. A product that takes the time to create a functioning site for all users shows the creators have a vested interest in the trust and satisfaction of their customers.

If you’re interested in how to make your website accessible, a great place to start online is the WCAG, where you can reference all the rules and the different levels for compliance.

Standard Beagle can also help. We offer accessibility auditing and development.