6 Reasons to Avoid Using Web Accessibility Overlays

April 18, 2022

What are web accessibility overlays?

Accessibility overlays are plug-in tools or widgets that claim to detect and ‘repair’ accessibility problems directly on websites and web apps in real-time. Those accessibility overlays are usually a javascript code to plug into your website, which then try to automatically ‘fix’ accessibility problems in the background as the page loads. The site is modified only at the browser level, not touching the site’s code.

Why web accessibility overlays shouldn’t be used

The consensus of many people with disabilities, developers, and those in legal communities is that accessibility overlays are not useful on a website. Here are six good reasons why you should avoid them.

  1. They are used as a band-aid to cover up some accessibility problems but do not actually solve critical accessibility problems in the code.
  2. They provide site owners a false sense of security, but do nothing else to improve access, so individuals with disabilities may be unable to navigate the website and access information properly.
  3. They are unable to properly address problems, such as missing alternative text, proper labeling, media captioning and transcription, keyboard navigation, parsing, required form fields, ambiguous anchor text links, etc.
  4. They can make access to information worse. Many users with disabilities have expressed strong dissatisfaction with these tools. Example, statement from Haben Girma, Human Rights Attorney.
  5. They can affect the performance and security of your site, due to the size and nature of scripts used.
  6. An accessibility overlay may run counter to end users' preference for privacy and may create a risk of noncompliance.

According to Steve Faulkner, one of the experts in the digital accessibility industry, some accessibility overlays make your site less accessible by introducing more bugs than before. In many cases, the accessibility ‘improvement’ features bring their own accessibility barriers for users. Read his article, Bolt-on Accessibility – 5 gears in reverse, to learn more about his findings.

The recommended solution

Design, develop and build your website with inclusion and accessibility in mind and do not put a band-aid to cover up accessibility problems. There are a few ways to approach this work:

  • Perform an automated and manual audit of your website and address all accessibility problems at their core. Learn more about accessibility checkers.
  • Perform extensive testing using screen reader software. Apple VoiceOver, JAWS, and NVDA are some of the screen reader software we used for testing.  
  • Address problems by restructuring and rebuilding your design, content and code, if needed.

The only way to improve inclusion and accessibility is to actually do the work required to become accessible, and that will not happen overnight. There are no shortcuts to making and keeping your website  and web apps accessible. Accessible websites are SEO-friendly, have better search results, reduce maintenance cost, and are usually easier for everyone to use.

Learn more about digital accessibility

There are several ways to expand your familiarity with digital accessibility and inclusion. Learn about accessibility best practices by joining groups, like the Accessibility Ambassadors, participate in the Digital Accessibility Badging Program, and join the University’s #accessibility Slack channel for peer support.

If you have any questions or need additional information, please contact urweb@umn.edu.