Not All Accessibility Overlays Are Created Equal

Introduction

In the accessibility industry, there are many different types of products and services that can help organizations achieve compliance. The right tool or service for your organization depends on your desired project timeline and overall accessibility maturity.

Most companies that are completely new to accessibility will start with an audit, which is a detailed report of accessibility issues of an organization’s website or application.

Audits are a great way to get a holistic view of your digital products’ accessibility, but they do require time and remediation effort from your organization’s developers, which can disrupt your team’s sprint cycles. The other solution for companies that are new to accessibility is accessibility overlays.

Pause: In the accessibility community, overlays can mean two very different things. In the post below, we’ll dive into why Tool-based overlays are problematic. It’s important to note that Deque’s Accessibility overlays are Custom JavaScript overlays. We’ll discuss the key differences in further detail below.

Custom Javascript accessibility overlays should only be used as a short-term solution for when:

• Your company needs to urgently be accessible because of a legal complaint or lawsuit
• You need to make a 3rd-party service on your website accessible and you don’t have access to the source code or cannot upgrade to a new version immediately
• You need your product to immediately be accessible to sell it to another organization, such as the Federal Government.
• Your development teams are working on integrating a long term fix but you need to resolve a critical accessibility defect immediately.

In this blog post, I’ll discuss what an accessibility overlay is, how not all overlays are created equal (Tool-based overlays vs. Custom JavaScript overlays), and how Deque’s Amaze service could help your company achieve accessibility right now.

What is an Accessibility Overlay?

An accessibility overlay is an additional piece of JavaScript that is added to a Web site that modifies the markup of the site when the user views it. These overlays can change what the site looks like to address visual accessibility issues, can add missing accessibility semantics or can add accessible text or text alternatives to the page.

There are two types of overlays: targeted “Custom JavaScript overlays” – customized to the specific page and website, these overlays can make comprehensive changes to any accessibility concern on a specific page, and “Tool-based overlays” often seen in the form of a toolbar, plugin or extension – these make limited, generic changes to the page, some of which can be controlled by the site visitor.

Not All Overlays are Created Equal: Avoid Tool-Based Overlays

When the accessibility community cringes in regards to the term overlays, they are thinking of the toolbar accessibility overlay services or even plugins, or widgets that require the user to install a separate tool in order to make the website accessible.

These overlays are a one-size-fits-all approach that simply does not work for people with disabilities. In fact, tool-based overlays are cheap assistive technologies that do little to improve the real accessibility of Web properties.

Here are the big issues with these tool-based overlay “solutions”:

They require people with disabilities to download and use a different tool they aren’t used to, instead of the assistive technology they are comfortable with.

This may not seem like a big deal for those who don’t regularly use assistive technologies, but it is akin to asking you to write a ten-page paper with your left hand if you’re right-handed, or vice versa. Assistive technologies have a lot of features and take a lot of time for users to become proficient, asking them to use some cheap alternative is no solution at all.

They require the user to know about and install a custom plugin that might introduce its own accessibility problems.

They don’t work for native mobile applications, so your website is still at risk for an accessibility-related complaint or lawsuit.

They only address a limited scope of accessibility issues:

• They provide simple modifications to the page overall, they may change the color contrast, add a focus indicator or add a high contrast mode which addresses only a small number of the possible accessibility barriers
• They cannot add missing complex keyboard or device interactions, they cannot fix specific site semantics and they cannot add meaning or text alternatives where these are missing

Deque’s Solution: Amaze – Custom JavaScript Overlay

At Deque, I am the product manager for Amaze. Amaze is an “overlay” solution that is completely different from what most people think of when they hear the term.

To start, Amaze is a patented custom service built by myself and the Developer Service Team. We use our patented technology to create custom JavaScript overlays to fix specific accessibility issues on your specific pages without having to touch the source code of your website or application.

How it works: Amaze is JavaScript that runs after a page load and before the end-user consumes the page, providing accessibility corrections and enhancements as a temporary means to improve accessibility.

Amaze can make the following changes to your web application without changing the underlying source code:

• Add missing textual information (example: alternative text for an image)
• Add other missing HTML attributes (such as roles of elements, states of elements), correcting invalid attributes, or to correct invalid elements entirely
• Add event handlers to allow use by all sorts of input devices
• Add structural information to the page (example: marking lists as lists, tables as tables, etc.)

This approach makes comprehensive accessibility fixes to your pages that work for all disabilities and for all assistive technologies.

Amaze overlays can solve the majority of accessibility issues. However, there are a couple of things Amaze cannot fix that companies will need to address. For example, Amaze cannot add captions to existing videos on the page or fix specific issues with images such as color contrast and text inside of images. Also, it’s important to reiterate Amaze is not a long-term solution: although Amaze goes into the DOM, it will need to be updated if targeted elements in the DOM change.

In Summary

As previously mentioned, Custom JavaScript accessibility overlays are a great short-term solution that helps to give your organization time before a sustainable accessibility program and shifting accessibility left in your software development lifecycle (SDLC).

If you’re looking for long-term, sustainable ways to implement accessibility, I recommend looking into the following tools or services:

• Automated Accessibility tools such as axe or WorldSpace Attest, which developers can use while they code and catch up between 30-50% of accessibility issues.
• Monitoring tools, such as WorldSpace Comply, are also a great way to ensure new code isn’t creating new accessibility issues on your website.
• Training to avoid outsourcing manual remediation efforts, as not all accessibility issues can be caught through automation. Training also helps teams adopt the cultural change needed for accessibility to succeed. Deque offers virtual training, online, and in-person training to help your organization become self-sufficient.