Using accessibility overlays to make your website accessible to everyone might sound like a great idea. Installing an overlay plugin and trusting it to do the complex and nuanced work of correctly structuring tag trees on your website is tempting if you just don’t have the time, manpower, or HTML knowledge to make and keep your digital resources accessible. But downloading and inserting a quick, generic line of code into your website that promises to take away all your accessibility woes is usually too good to be true.
How do accessibility overlays work?
Overlays usually consist of a line of generic code that a website owner can quickly and easily add to their website. Many accessibility overlays can identify some elements of a website and place digital labels on them so assistive technology can relay that information to the user. These digital labels, called tags, are embedded in code so sighted users never see it. Unless you’re using assistive technology you would probably never know whether a website was tagged correctly or at all.
Identifying visual elements non-visually
Many of the elements identified by the widgets are visual, such as charts, infographics, or images. The information only makes sense because of how it’s presented visually. For example, the data in a pie chart is only useful if you can see what the divisions and data are in each “piece of the pie.” There often isn’t much text for assistive technology to “read” to its user. Tables and lists are similar- while they do contain some text, that text doesn’t make much sense if it’s read without the context of a table or list. If the items in a list were read one after another without any indication that they were part of a list, they wouldn’t make any sense. The same is true of tables.
Context makes a big difference
Overlays can often automatically identify the existence of an image, chart, table, etc, on the page based on its coding. They might label it correctly as “image” if the coding indicates that. But knowing there’s an image on the page isn’t helpful if you don’t know what the image depicts.
Some automated overlays go as far as to use AI in addition to the coding to guess what’s in the element. For example, a screen reader user may have come across an article about new places to eat in the area. As their reader skims through the page, it identifies an image on the page. The screen reader reads what a widget has identified as an “image of a woman.” Perhaps it even identifies the image as a “woman with long hair.” While that might not be incorrect, the screen reader has not identified that the image is actually a Starbucks logo. Automation hasn’t progressed far enough to identify context, which makes all the difference.
Overlays don’t fix the underlying problem: coding
The problem isn’t necessarily with the overlay in itself. Accessibility overlays and other automated accessibility solutions can only identify information that they find in the website’s coding. If the website incorrectly coded, faulty or missing information in the coding causes the overlay to present faulty information to the user. Easy drag-and-drop website plug-ins reduce the need for a website builder to even look at back-end coding, so they often won’t notice inaccessible coding. Even professionally built websites can look great from the outside but not have accessible coding. Overlays can present good, accurate information to the user if they can collect good, accurate information from the coding. They can’t fix inaccessible coding.
Do accessibility overlays produce usable websites?
Some overlays offer an alternative, accessible version of the existing website. When a user visits a website using an overlay, they must click on a button to request the accessible version. This produces a “separate but equal” effect which usually isn’t equal, and isn’t acceptable under the ADA, either.
Other overlays place a screen over the website which functions as its own type of screen reader, forcing the user to use that technology instead of their own. The user must turn off their own familiar assistive technology and learn a new system just for one website. For example, instead of tabbing through a website using familiar keyboard shortcuts, they might have to use the overlay’s unfamiliar keyboard shortcuts. Perhaps an overlay provides too many unnecessary accessibility tools and controls, forcing the user to sort through them to find the accommodations they need, which their regular screen reader is already set up to provide automatically. Sometimes magnification overlays cause the web page information to overlap and become distorted when the user enlarges the site.
Partially accessible isn’t accessible
Overlays are automated, so they can miss up to 80% of accessibility errors, just like automated accessibility checkers. They can fail to tag or incorrectly tag elements, miss inaccessible navigational elements, or otherwise ignore features that prevent an assistive technology user from navigating and identifying information correctly.
Accessibility overlays might identify links but not tell the reader where the link is taking them. They might identify headings, but incorrectly tag the hierarchy of the headings, so the structure of the page is unclear. Many websites use images as navigational elements. If an overlay has tagged a “click here” button as an image without any description or mention of the fact that clicking on it will take the user somewhere, it’s ineffective and inaccessible. If someone using assistive technology would not be able to access any part of your website, you’re violating the ADA.
Will automated accessibility overlays save you from lawsuits?
Nope! Even if an accessibility overlay can identify and tag elements, there’s no way for it to determine whether the tags are correct, or whether visually-based features are described correctly. If any part of your website isn’t accessible assistive technology users won’t have the same experience as other visitors. That’s discriminatory and opens you up to lawsuits.
In March 2020 alone, there were several digital accessibility lawsuits filed against companies who thought they were achieving accessibility by using automated accessibility overlays on their websites.
Companies who have accessibility plug-ins, widgets, and overlays that have still been sued for digital accessibility violations:
Walters v. Venum Training World, Inc.
Venum Training World, Inc. used an overlay called UserWay, which the plaintiff claims wasn’t consistently announced to screen reader users. If not all assistive technology users get the message that they have to use the provided alternative method of accessing the website, it is not accessible. Some additional violations included a keyboard trap (a situation where someone can use a keyboard to click into an element on the page, but then cannot use the keyboard to exit back to the rest of the webpage), inaccessible required fields, and unannounced discount ads. Screen reader users couldn’t select product variations and add products to a cart.
Fredericka Nellon v. Agri Beef Co.
While the lawsuit doesn’t mention AccessiBe by name, the wheelchair accessibility icon opens up an AccessiBe menu when clicked. Even so, there were a number of accessibility violations. Promotional pop-ups contained correctly tagged information. However, the pop-up itself was not announced to the assistive technology user, so none of its information was accessible. Other promotional elements including coupon codes and amounts were not announced to assistive technology users. Many form fields were not marked as required, but produced error messages when left empty, which were also not announced.
Ariza v. Carmen Sol FL, LLC
Carmen Sol FL, LLC also has an AccessiBe icon and menu on its website. However, many navigational menus were not labeled correctly to integrate with screen readers. Image links were mislabeled, and product purchase variations such as quantities were not labeled.
Cruz v. Rockwell Time, Inc.
Rockwell Time, Inc. uses an overlay called Accessibly by On The Map Marketing. But images on their website still lacked alt text. Many elements lacked labels and page titles, or contained duplicate page title elements. The website had several broken links as well.
If it sounds too good to be true, it probably is
Companies build websites so they can share their products, services, information, and mission with the world. No matter how nice a website looks, if its coding prevents a significant part of the population from accessing that information it fails to meet its goal. Weaving digital accessibility into a website’s coding from the very beginning is the best way to achieve accessibility. Overlays might seem like a quick and easy fix for inaccessible websites, but they can’t replace taking the time and effort to correctly apply accessible tags.
Don’t forget! The documents on your website need to be accessible too… contact Equidox to learn more about our accessibility consulting services and PDF remediation.
