Important Note
The original intent of this article was to provide full examples of the overlay widgets’ features in active use, including details on how they operate and before-and-after screenshots. However, due to the litigious nature of some overlay vendors and their continued bullying of their critics, I’ve chosen to provide this information without mentioning any names.
Table of Contents
- Introduction
- Summary
- Detailed findings
- Conclusion
Introduction
“Overlays” are a class of software products that claimto improve the accessibility of the websites upon which they are installed. They profess to improve accessibility through two primary modes of operation:
- Modifying the webpage itself in a way that eliminates code-level accessibility errors.
- Presenting a series of controls – often referred to as a “widget”- which are purportedly aimed at functioning as on-demand assistive technology. Those controls further modify the presentation and/ or operation of the page in ways that intend to make the underlying page more usable.
Overlay vendors claim that their products solve accessibility concerns in a way that will cause the site to automatically come into compliance with national/ international laws and standards. These claims are untrue. For more information on the claims made by vendors of such products, see Overlay False Claims
The intent of this document is to describe the operational capabilitiesof the widgets presented by overlay products and to compare those capabilities to features already in existence on users’ computers via either their operating systems or browsers.
Summary
From October 2021 to January 2022, I performed extensive research on the major players in the accessibility overlay market. During this period, I analyzed the functional capabilities of the products’ widgets, as described in the Introduction, above. For the most part, this research was performed using the overlay vendors’ own websites which are assumed to be running the latest versions of their software. In some cases, I needed to use customers’ sites to research specific features, such as claims around stopping animated content. Between the time of the initial research and the writing of this document, 4 of the 6 customer sites accessed during the gathering of this data have removed their overlays.
This research revealed that the capabilities provided by overlays’ widgets are often insufficient analogues of features and capabilities that already exist in all computers available commercially since 2015.
Although some capabilities of these widgets can provide benefit to users who need them, there also remains the fact that users who need those features on one site will need them on all sites and, in fact, all applications on their computer. For example: If a user needs a high contrast mode on one website, they need it on all websites and on all software on their computer. The solution, therefore, resides in the user’s operating system or browser or as an add-on to their computer, not the websites they visit. Nevertheless, one of the ways overlay vendors sell their products is to tell their customers that the widget helps to “personalize” the experience. However, as you’ll see below, overlays almost never match the level of personalization built into their operating system and browser.
Overview of findings
The table below lists the personalization features available in overlay widgets in the left column. The right column provides a summary of how that feature works across overlays and how it compares to what’s already built into the user’s computer.
| Feature | Comments |
|---|---|
| Font resize | Only one overlay widget resizes text beyond 200% but did so with significantly lower usability than what is built into the browser. Some overlays caused text to become hidden or to overlap, rendering the text illegible. The user’s browser allows for significantly larger resize, often without readability issues. There are also 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| Font family modification | All but one overlay widget allows for modification of the font. Two of them only change to a font that’s generally already in use (or similar to what’s in use). Most others include an option for what is claimed to be a “Dyslexia friendly” font, however there’s little consensus among researchers on whether such fonts are useful. Fonts can be customized by users at the operating system and browser level. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| Line height modification | Four of the overlays facilitate line-height adjustment. Of the 4, 2 of them only increase line-height beyond the minimum required to meet WCAG. Operating systems and browsers do not offer this capability. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| Letter spacing modification | Four of the overlays facilitate letter spacing adjustment. Operating systems and browsers do not offer this capability. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| Text alignment modification | Only two of the overlays facilitate modifying the text alignment. Operating systems and browsers do not offer this capability. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| High contrast mode | All overlay widgets offer some form of adjustment to color contrast. None of them offer the level of granularity or variety of options already built into the user’s computer. |
| Grayscale mode | All overlay widgets offer some form of adjustment to grayscale. None of them offer anything that functions better than the grayscale feature already built into the user’s computer |
| Stop animations | All overlay widgets claim the ability to stop animations and/ or blinking. However, only 3 of them were found to be effective at doing so. All browsers can be configured to stop animated content and both Windows and MacOS have setting to disable animation in their accessibility preferences. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| “Change colors” | Three overlay widgets have features allowing the user to change the colors of certain types of content. Of the 2, only one has any degree of granularity. |
| Cursor modification | Nearly all overlay widgets can modify the cursor. However, none of them offer more options than either an enlarged black cursor or enlarged white cursor. Both Windows and MacOS can customize the pointer in a far larger variety of colors and with more granularity in sizes |
| “Screen reader navigation” | Four of the overlays offer features that purport to either function as a screen reader or enable screen reader-like navigation between elements like headings and links. None of these features come close to offering functionality like the screen readers built into Windows and MacOS. |
| Keyboard navigation | Three overlays contain features labeled something like “Keyboard Navigation” or “Navigate by Keyboard”. In all three cases, the feature breaks expected behavior for keyboard-only users. In one case the feature was dependent upon other features being enabled as well. Custom shortcuts by one overlay widget did not appear to work. In another, it provided keyboard focus to elements not intended for user interaction. |
| Focus indicator | Two overlays provided an enhanced indicator of focus, and two others did so when other features were enabled. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits and this is also enabled when the built-in screen readers are enabled on both Windows and macOS |
| Read Aloud | One overlay offered a Read Aloud feature which does not offer any functionality that is better or different than the similar feature already built into both Windows and MacOS. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits that also offer much more robust features. |
| Voice Control | One overlay offered a voice control feature. Labelled as “Voice Commands”. This feature must be used in conjunction with the “Keyboard Navigation” control and is only available in Google Chrome. It recognizes commands from the list of commands but is not entirely accurate and often the commands have to be repeated multiple times for it to perform the intended action. This feature is nowhere near as robust as the Voice Control capabilities built into Windows and MacOS |
| Underline/ highlight controls | Five overlay widgets offer the ability to underline or highlight specific types of content – typically headings and links.This feature doesn’t exist in operating systems or browsers. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits. |
| Display text alternatives for images | Two overlay widgets offer an ability to visually display the text alternatives provided for images – one of which does so in a way that requires the use of a mouse. This is, itself, a violation of WCAG. This feature doesn’t exist in operating systems or browsers. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visit |
| Attention focus/ Eliminate Distractions | Four overlay widgets offer features aimed at eliminating distraction (or, more accurately, focusing attention). They do this by making visual changes to the screen – often darkening most of the screen other than the portion of the content that the user is consuming at the time. The user can modify where that focused area is. Arguably the most useful feature of overlays, there are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visit |
Detailed Findings
Text changes
Overlay widgets often contain a handful of controls that change how text content is presented on the page. Ostensibly, these changes are intended to make the content easier to read. In some cases, this is true. As you will read throughout this document, these text changing features are likely to be the only overlay features of real benefit to a website’s visitors. Somewhat ironically, none of the overlay widgets’ text changes have any effect on their own product.
Font resize
Font resize controls increase the size of the text of the underlying page. The ability to increase text size is useful for people with mild visual impairments because it makes the content easier to read.
Both Windows and macOS can change the default font size or add a default zoom level (or both). Additionally, all browsers can zoom content as well. Third party assistive technologies and browser plugins also exist to modify the font size for all websites the user visits.
Most overlays appear focused solely on the goal of meeting WCAG Level AA requirements for 200% zoom rather than focusing on the user experience.
- One overlay widget does not go up to 200%, thus not even allowing compliance with WCAG Level AA
- Only one overlay widget resizes text beyond 200%. However:
- it does so in a way that often results in significant text overlap, rendering content illegible.
- its resize control only resizes 10% per click, a very poor user experience when compared to how browsers do this.
- Most overlay widgets’ text resize capabilities do so in a way that does not facilitate reflow.
Determination
Overlays offer less utility than what’s built into the user’s computer when it comes to font resizing.
Font-family modifications
Some fonts can be difficult to read, in general, especially when small. Font choice is particularly important for users with visual impairments and reading impairments like Dyslexia. Font-family controls change the page’s text to fonts that are, ostensibly, easier to read.
The actual utility of changing fonts is questionable because most websites already use a sans-serif font, and most font-family modifications simply switch to a different sans-serif font, as we describe below. Some overlay widgets switch to a so-called “Dyslexia friendly” font, however the scientific literature on such fonts is wildly inconclusive. Most experts agree that other typographical concerns, such as line-height, letter spacing, and word spacing matter more than font family, except when the font in use is egregiously bad.
Operating systems and browsers do not have the ability to change a website’s font, making this one of the only useful features of overlays. However, as always, per-site solutions are less desirable than something that can be used on every website a user visits. There are browser plugins available to accomplish this task.
Typically labeled as “font” or “readable font”, most overlays simply change to commonly used fonts such as Arial or Helvetica. Some just change to a generic sans-serif font. As mentioned above, most users won’t notice a difference because most websites already use sans-serif fonts. Three overlays also provide options for a serif font. Three of them offer special fonts purported to be “Dyslexia-friendly” which, as mentioned above, are not proven to help users with Dyslexia.
Determination
Overlays offering an ability to change fonts is a good thing though real-world utility is questionable. Browsers and/ or operating systems should offer this capability because it should not be left to a per-site solution like an overlay.
Line-height modification
Line-height control will increase the amount of space between lines of text. Line-height is another concern for users with visual impairments and reading impairments like Dyslexia. Increasing line-height can make text content easier to read.
As is the case for font choice, operating systems and browsers do not have the ability to change the line-height of text. However, as always, per-site solutions are less desirable than something that can be used on every website a user visits. There are browser plugins available to accomplish this task.
Adjusting line-height is likely the single most beneficial feature of overlays, followed by letter spacing, below. Most overlays handle this operation rather well, however one product adjusted line-spacing, letter-spacing, and word-spacing as one operation which is decidedly less flexible than the other products.
Determination
Overlays offering an ability to change line-height is a good thing. Browsers and/ or operating systems should offer this capability because it should not be left to a per-site solution like an overlay.
Letter spacing modification
Letter spacing controls increase the space between each letter in words. Slight increases in letter-spacing can make text content easier to read for users with visual impairments and reading impairments like Dyslexia. Too much spacing can make content more difficult to read.
Operating systems and browsers do not have the ability to change the letter spacing on a website. However, as always, per-site solutions are less desirable than something that can be used on every website a user visits. There are browser plugins available to accomplish this task.
Only two overlays have the ability to adjust letter spacing separate from other text spacing changes.
Determination
Overlays offering an ability to change letter spacing is a good thing. Browsers and/ or operating systems should offer this capability because it should not be left to a per-site solution like an overlay.
Text-alignment modification
Text-alignment controls change how the text is aligned on the page. Text-alignment can have impact on how easy it is for users cognitive, language, or learning disabilities to read the content. Left-aligned text (or right-aligned text when the content is in a Semitic language) is easier to read while centered text and justified text are decidedly less so. Most content on the Web is properly aligned for the language of the content, anyway.
Operating systems and browsers do not have the ability to change the text alignment on a website. There are browser plugins available to accomplish this task.
Only two overlays offer the ability to change the text alignment. They offer options to “Align Center”, “Align Left”, and “Align Right”. One of them also offers an option to “Justify” the text.
Determination
Overlays offering an ability to change text-alignment is a good thing though real-world utility is questionable. Browsers and/ or operating systems should offer this capability because it should not be left to a
per-site solution like an overlay.
Display changes
High contrast mode
The contrast between the page’s background and its content & controls is important for usability, especially for people with certain visual impairments. Depending on the nature and severity of their visual impairment, users who are low vision often benefit from a very high degree of contrast.
Operating systems have built in capabilities for adjusting contrast settings. macOS and Windows (as of Windows 10) retain background images in their high contrast modes, making this feature far more user-friendly than it had been several years ago.
Overlay products are deeply inconsistent in how they handle their contrast:
- Some do a good job of changing to a high contrast view but hide background images in the process.
- Some high contrast modes only nominally increase contrast and function more like high-saturation modes.
- Ironically, some overlays don’t change the contrast of their widget when switching to their high contrast view.
Only one overlay managed to change the contrast of the images on the page, a behavior that accurately mimics the native behavior of the user’s operating system.
Determination
Overlays offer less utility than what’s built into the user’s computer when it comes to high contrast mode.
Grayscale mode
Grayscale mode modifies the colors on the page such that all colors are reinterpreted to shades of gray. This presentation approach may be beneficial for people with certain types of visual impairments, photosensitive epilepsy, or attention deficit disorders.
As is the case for high contrast mode, Windows and macOS operating systems have the ability to enable a grayscale mode. This capability is very quick to enable in both cases.
Labeled “Color blind”, “Monochrome”, “Grayscale”, or “Desaturate”, all overlay widgets offer some form of adjustment to grayscale. None of them do anything different or better than the native feature within the operating system.
Determination
Overlays do not offer any benefit beyond what’s built into the user’s computer when it comes to grayscale mode.
Stop animations
Animated content, animation effects, and videos can be problematic for users with attention deficit disorders or vestibular disorders. Controls to stop animation are intended to disable such features.
All browsers can be configured to stop animated content and both Windows and MacOS have setting to disable animation in their accessibility preferences. There are 3rd party browser plugins that allow for this sort of modification to occur on every site a user visits.
All overlay widgets claim the ability to stop animations and/ or blinking. However, only 3 of them were found to be effective at doing so. While there may be some circumstances may exist in which overlays are able to stop animations, they failed to do so more often than not.
Determination
When it comes to stopping animations, overlays would probably win over native functionality if they actually worked.
Content highlighting
Content highlighting features are, ostensibly, aimed at calling a user’s attention to certain types of content on the page, such as headings or links. The usefulness of such a capability is questionable, especially because the content being highlighted is often already given a distinct presentation style on most websites by the designers.
Operating systems and browsers do not have this feature natively. However, there are browser plugins to facilitate such behavior and assistive technologies for users who are low-vision or have cognitive impairments are far more robust than what overlays offer.
Four overlay widgets have the ability to highlight certain types of content:
- Headings
- Links
- Titles
In addition to the above, two of them also had a feature to highlight content as the user hovers over it.
Unfortunately, there are problems with how overlay widgets implement this feature. Most notably, the highlight effect is often quite simplistic, such as applying a yellow background to the “highlighted” content which can create color contrast problems. In other cases, the highlight effect changes the text color or adding colored underlines which also creates color contrast problems. These changes to content colors are also violations of WCAG 1.4.1, making the overlay a net-negative for accessibility.
Determination
When it comes to content highlighting, overlays would probably win over native functionality if they didn’t create new accessibility problems in the process.
Color modifications
Color modification features vary significantly from one product to the next with far less consistency than other features. Some are labelled as “Color Shift” and apply a color filter against the entire page whereas others change backgrounds and content colors. The benefit of such a feature is questionable due to the lack of robustness, as implemented, whereas other color changes, such as high contrast modes or grayscale modes, are much more useful.
Both Windows and macOS operating systems have features to change the colors of certain types of controls and content or to change the general color palate of the screen itself. macOS, for example contains settings called “Color Filters”, which contains four presets as well as the ability to fully customize the intensity of a functionally infinite array of colors.
Overlays’ treatment of such a feature is largely inconsistent:
- Only three overlay widgets offered this ability.
- One overlay just shifts colors in a way that mostly mimics the operation of the Color Filters in macOS, but with only one possible “filter” change.
- Another overlay offers the ability to change the colors of three types of content individually: text, titles, and background colors.
- Only one offers any granularity to their color adjustments, but still limits the types of content on which the colors can change.
For the most part, the color adjustments were more likely than not to create color contrast problems on the underlying page, something that typically does not happen with the color filters built into the user’s operating system. Ironically, the overlays only changed the colors of the underlying page, not their own widget.
Determination
Overlays offer less utility than what’s built into the user’s computer when it comes to color modifications and created new accessibility problems in the process.
Focus Indicator
Sighted keyboard users benefit from the ability to easily see what control has programmatic focus while they tab through the page. Overlay widgets often have the ability to provide an enhanced indication to ensure that the item with current focus is unambiguous. Because websites often fail to make focus indicators clear and obvious, this feature is helpful for people with color deficiencies and various visual impairments.
Operating systems and browsers do not have the ability to independently change the focus indicator. Both Windows and macOS provide enhanced focus indication when their built-in screen readers are enabled. Third-party browser plugins exist to fulfill this need for users who need this on every site they visit.
Only two overlays provide a focus indicator as an independent feature. Two others did so when other options were selected. For those that had the focus indicator as an independent feature, they tended to “double up” when the underlying website already had its own focus indicator which is arguably a worse experience for some users.
Determination
If overlays were able to pre-determine if a sufficient focus indicator existed, this would be a good feature to have. Unfortunately, the way they do so is not intelligent enough to avoid potential UX issues in some cases.
Pointer/ Cursor modifications
Like focus indication, the ability to see the pointer and the cursor more easily is very useful for people with certain types of visual impairments. Overlays sometimes have features that will increase the visibility of the pointer and/ or cursor.
The ability to change the pointer & cursor style is a feature that is built into both Windows and macOS by default. While nearly all overlays have this feature as well, they are all limited to either a “big black cursor” or a “big white cursor”. The operating system capabilities are much more robust and flexible than anything overlays provide.
Determination
Overlays offer less utility than what’s built into the user’s computer when it comes to pointer & cursor modifications.
Text-to-speech
For users without vision text on screen must be read aloud so they can perceive the content. For users who are low-vision and users with reading or other cognitive impairments, listening to the text being read aloud can supplement reading to reduce the difficulty of reading and understanding the content.
Both Windows and macOS have text-to-speech capabilities. Some desktop apps such as Adobe Reader and Microsoft Office have this as well. Windows and macOS offer an array of settings to control things like the voice, speech rate, volume, etc. There are a large number of third-party plugins for text-to-speech that closely mirror the capabilities built into the operating system. Plugins often also have additional features such as highlighting the text as it is read.
Two overlay widgets have text-to-speech features, only one of which having any utility. In this case, the overlay had controls to go back and forward as well as continually reading the text. This is, admittedly, a better experience than what’s available from the operating system. The other overlay’s UX is completely broken. After enabling the feature, clicking on a text block causes the text block to be announced. This is a fine experience. However, if you click on a control that contains text of any sort, the text will be announced partially before the control performs its associated action, e.g., navigating to a new page. This creates a poor experience for users who require text-to-speech, due to actionable elements not being fully announced before activating and changing context.
Determination
Overlays’ text-to-speech abilities are inconsistent, with one offering a good experience while the other offers significantly less utility than what’s built into the user’s computer and created new accessibility problems in the process.
Voice control
Voice control features allow a user with motor impairments to control their computers. Using voice control allows the user to navigate, interact with controls, and type text into fields.
Both Windows and macOS have features that let the user control their computer via voice input. Third party software, such as Dragon Naturally Speaking, have offered robust capabilities around voice control for well over a decade.
Only one overlay widget offered a voice control feature. Labelled as “Voice Commands”, this must be used in conjunction with the “Keyboard Navigation” control and is only available when the user is using Google Chrome. It recognizes commands from a list of commands that appears in a dialog on the page but is not entirely accurate. Commands often must be repeated multiple times for the tool to perform the intended action, which may be frustrating for users who attempt to use the “Voice Commands”.
Determination
Only one overlay had voice control and it offered far less utility than what’s built into the user’s computer and had very poor UX.
Other purported assistive features
Display image alt
This control visually exposes the text alternative when one is supplied for the image. A text alternative, if supplied, helps users who cannot see the image understand what the meaning of the image is, in context. Some users with cognitive impairments may also benefit from the ability to see the image’s text alternative.
Neither browsers nor operating systems have features that show an image’s alternative text, there are also relatively few browser plugins to accomplish this task, with most of them focused on either use as a testing tool or use in viewing text alternatives on social media posts.
Two overlays have this feature. In both cases, the alternative text for images is displayed as a tooltip on mouse hover. The tooltips used for displaying alternative text cannot be triggered by the keyboard, and therefore the information they contain is only accessible to mouse users. Sighted keyboard users, touchscreen users, and blind/low-vision screen reader users cannot access the information contained in the tooltips.
Determination
When it comes to displaying text alternatives, overlays would probably win over native functionality if they didn’t create new accessibility problems in the process.
Keyboard navigation
Users who cannot see the mouse pointer, cannot see it clearly, or users who lack the motor control to operate a mouse/ touch pad often use the keyboard to navigate web pages and interact with their controls. Overlay widgets often contain controls which purport to improve the ability to navigate via keyboard.
Overlay widgets’ keyboard navigation features are best described as being more disruptive than useful, with one small exception. We observed a case where of the overlays appeared to “repair” poor keyboard accessibility in a website’s megamenu. However, it was unclear whether this was a built-in feature of the widget or custom code added after-the-fact by the overlay vendor.
In all other cases, overlays tend to disrupt operation of the underlying site:
- For one overlay with this feature, a special “Blind Users” profile must be activated. The keyboard navigation feature does not function independently.
- Multiple overlays added things to the tab order that are not intended for interaction by the user. Users who navigate the UI using the keyboard expect a certain interaction pattern that is broken by this change, making it more disruptive and confusing than useful.
Determination
Overlays’ keyboard navigation controls are needless features that create more problems than they solve.
Remove distractions
Users with attention deficit disorders and certain other cognitive impairments may find it difficult to consume content on the Web, especially when other content on the page is distracting. Some overlay products contain controls that modify the presentation of the page in a way that is intended to reduce distractions.
Although Windows and macOS do have accessibility features that are intended to improve access for cognitive disabilities, none of them are aimed at reducing distractions, though such features are available in browser plugins and assistive technologies.
Among all features within overlays, this could be the most useful feature of overlay widgets. Only four overlay widgets have this feature and unfortunately, this feature depends on using the mouse for interaction, meaning that the overlay widget adds net-new accessibility problems for end users.
Determination
When it comes to removing distractions, overlays would probably win over native functionality if they didn’t create new accessibility problems in the process.
Conclusion
Of all the personalization features presented by overlay widgets, only 3 of them cannot be performed natively by your website visitors’ operating system:
- Text readability improvements (Font family, line height, letter spacing, text alignment)
- Focus indication
- Attention Focus/ Eliminate Distractions
However, these personalization features can be had via a third-party browser plugin. Chrome webstore, for example, has a number of accessibility-related browser extensions, some of which do some or all of the above and will be available for the user on every site they visit.
While the concepts behind the enhancements provided by overlay widgets make sense and can be useful, users who need to use such features will need them on every website they visit. Based on the evidence provided in this article, adding an overlay to a website results in little more than performative accessibility because overlays are poorly placed in the technology stack and their feature are mostly a poor imitation of the features that are already built-in to the user’s computer.
People with Disabilities Hate Overlays
The information above makes clear three important facts:
- Most of the enhancements provided by overlay widgets are, at least conceptually, beneficial to a website’s users.
- Nearly all the enhancements provided by overlay widgets can already be gained from within the user’s operating system or browser. Third party plugins can bridge the gap.
- As implemented by overlay widgets, UX and accessibility issues exist for the 3 enhancements that the user’s computer doesn’t already do, thus reducing their usefulness.
If overlay widgets were indeed useful for people with disabilities, they would be singing their praises. The opposite is true. In an article published a few months ago on the New York Times, For Blind Internet Users, the Fix
Can Be Worse Than the Flaws. In that article, a blind man, Patrick Perdue, says: “I’ve not yet found a single one that makes my life better,” Mr. Perdue said of automated accessibility web services. “I spend more time working around these overlays than I actually do navigating the website.” Patrick is not alone. The Overlay Factsheet contains direct quotes from 21 other people with disabilities who also echo his sentiments.
Overlays continue to thrive in the marketplace due primarily to widespread ignorance around accessibility. As discussed in the section above, people with disabilities and professionals in the accessibility field understand the numerous shortcomings of these products. Consumers are led to believe otherwise due in no small part to the false claims made by overlay vendors.
As is the case with any addition to your website, it is always a good idea to verify a product’s usefulness and functional performance before adding it to your site. When it comes to overlays, the answer should be clear.