A User's Guide to Accessibility Widgets

Accessibility widgets don’t provide an optimal experience for users. There are plenty of practical, technical reasons why accessibility overlays and add-ons simply can’t make the grade (more below) — but it boils down to relying on an after the fact solution, a cheap alternative to thoughtful, intentionally crafted digital experiences that are accessible to everyone.

The importance of accessibility is hard to overstate. Digital experiences permeate our lives: from food & grocery delivery to medical care, entertainment, communication, and distance education — apps, websites, and mobile interfaces are our direct connection to the public and private services intertwined in our day-to-day lives. Producing digital content that’s accessible to everyone doesn’t just demonstrate that you’re part of the push towards a wider, more inclusive internet for people all along the spectrum of physical and cognitive capacity — it’s a legal mandate. The Americans with Disabilities Act, established in 1991, requires public accommodation and commercial facilities to be designed, constructed, and altered in compliance with [the following] accessibility standards.

When it comes to digital products, the accessibility standards in question are the W3C’s Web Content Accessibility Guidelines, or just WCAG for short. The latest standards — WCAG 2.1 — lay out specific guidelines for structuring HTML code in such a way that standard accessibility features can properly interpret your content and users along a range of capacities can interact with your products and services.

How accessibility widgets “work”

Accessibility widgets look for improperly structured HTML code in your website, then attempt to apply generally applicable fixes that bring your website “up to code” according to automated scanners that look for WCAG compliance. This could mean automated creation of alternate text for images, rearranging elements of your HTML code to be in the right order, injection of Accessible Rich Internet Application code (ARIA) into HTML elements that should contain it, or a variety of other changes. Some accessibility widgets alter the CSS stylesheets that control the look and feel of your website, introducing larger fonts, high contrast colors, and other adjustments aimed at the visually impaired.

<img src="oak-tree.jpg" height=300 width=300> <!-- This image is missing the "alt" tag -->
<img src="oak-tree.jpg" alt="Decorative image" height=300 width=300> <!-- The "alt" tag automatically added -->
<img src="oak-tree.jpg" alt="An oak tree in a field" height=300 width=300> <!-- The "alt" tag added by a human -->

Check out the example above. The first line represents an incorrectly crafted image tag, which is missing the required alternate text and would trigger a WCAG compliance checker. The second line represents an automatic fix which could be performed by software, and the third line represents the correct alternate text as crafted by a human familiar with the content. The automatically fixed HTML markup won't trigger warnings from WCAG compliance checkers (because the alt attribute is not missing), but it may not help real users consume the content, either. In this example, the automatically added alternate text for the image doesn't deliver the right meaning of the content to screen readers: An oak tree in a field.

With accessibility widgets, the source code of your website remains unchanged. The automated adjustments are introduced “on the fly” using client side technologies like Javascript — technologies that run in the user’s browser and introduce the quick fixes after your website fully loads but before it’s presented to the user. This “extra step” has a performance tax that slows down load times and could make your site respond more slowly to user interactions.

Also, it’s important to note that while automating changes to your website’s HTML markup could bring it “up to code” per WCAG compliance scanners, it doesn’t consider the real people and real needs the standards are intended to address in the first place. Perhaps that’s why of the 3350 digital accessibility lawsuits in the USA last year, some 250 were brought against platforms using accessibility widgets.

Widget wonderland: How automations frustrate user experience

Accessibility widgets use automated technologies to scan your website’s code, find problematic and non-compliant HTML markup, then apply preprogrammed fixes. The result in some cases is “compliant” as far as popular automated WCAG compliance scans go, but it rarely resolves the obstacles to intuitive human interaction. That’s because it’s extremely difficult for an automated program to discern the intent of the website designer and apply the appropriate structure, alternate text, ARIA attributes, and other accommodations that expose that intent to users with varying needs.

In our collaborations with the Blind Institute of Technology, we’ve surfaced a variety of complaints about accessibility widgets from real users that routinely take advantage of standard accessibility features:

1. Accessibility widgets often require configuration & customization in order to begin working, which means completing an extra step before users can begin to interact with your content, product, or services.
2. A majority of the guidelines in WCAG cannot be properly applied by automated tools alone. The purpose of an image or the intended order of menu items, for example, need to be explained by real humans with context around your content.
3. Every accessibility plugin is different which means users must configure new plugins and widgets for each new website visited, rather than simply relying on websites to independently comply with WCAG standards that enable native browser accessibility features.
4. Accessibility widgets can have an overwhelming amount of options and customizations including image magnification, color scheme changes, proprietary screen readers, font changes and more. Many of these are unnecessary and complicate direct access to content.

Mike Hess, Founder and Executive Director of the Blind Institute of Technology — and a screen reader user — adds yet another voice to the choir:

“Website overlays high-jack the user experience, attempting to display the site in a way it thinks is helpful to me. Many overlays sit at the top of the page and continuously send audio announcements to the screen reader asking the user to engage the tool. These alerts constantly interrupt the audio when the webpage is [already] being read.”

Accessibility widgets may help websites report “compliance” against automated scans, but they do very little to address the core problems and make digital content accessible for users with varying needs.

The alternative: Design, build, and alter your website with users in mind

Accessibility and usability go hand in hand — both are the product of thoughtful, informed, and standardized approaches to website structure, layout, design, and interaction. In much the same way that building safer, better homes and offices means adhering to national and local building codes, crafting digital experiences that are accessible to everyone begins with meeting standards like WC3’s WCAG. Accessible content is better content for all of your audiences — and investing in affordable, incremental improvements to your HTML templates, stylesheets, and content management systems can have far reaching benefits for your users regardless of their individual physical capabilities.

Accessibility widgets are often touted as affordable alternatives to restructuring your web content, but the monthly rates (from ~$50 to about $300 a month in many cases) do more to silence the alarm bells of automated compliance tests than to solve core issues for real-life users.

Accessibility audits, accessibility workshops, and incremental improvement plans can have long lasting effects on your website, your team, and the way your organization engages with audiences of all kinds. And the team at Aten can help. Get in touch with us to learn more. 

Want to learn more about accessibility on the web? Check out my recent webinar "Accessibility Testing in Practice" that covers the basics of assessing a website.