Accessibility overlays are increasingly common and widespread, Fondazione LIA has received many questions about them recently. But what are overlays, and how do they work? How effective are they in making a website accessible? Here are the answers to some of the most frequently asked questions.

Accessibility of websites has become a fundamental requirement of many national and international legislations (such as the American with Disabilities Act, and in the European context the Web Accessibility Directive and the European Accessibility Act). Accessibility overlays (also called “accessibility widgets”) apply third-party code (typically JavaScript code) to a website, promising to solve most accessibility issues: fixingthe source code or improving the front-end, thus making a website accessible and compatible with assistive technologies and compliant with international guidelines (Web Content Accessibility Guidelines).

Accessibility overlays seem to be an ideal solution for anyone who needs to make their site accessible: they offer a quick, easy and inexpensive approach, and also require little effort for the website’s owner and its developers.

It is no coincidence that, in recent years, the popularity of overlays has grown more and more and it is now quite common to find websites that have one installed. The presence of an accessibility overlay is usually recognizable by a button with the international symbol for accessibility – a stylized little man with outstretched arms – positioned at the bottom of the page, activating it allows access to a series of settings to improve the accessibility of the site.

However, automatic tools, in the current state of technological advancement, have their limitations, even when based on the latest technologies, such as artificial intelligence. The question we have to ask ourselves is: can accessibility overlays be the solution to make a website fully accessible and compliant with regulatory specifications and requirements?

Common functionalities of accessibility overlay

Accessibility overlays usually offer a number of options that allow users to customize the website and adapt the content to their specific needs. Typical options are:

• Change font size, line height, letter spacing, text alignment, enlarge content;
• Change color profiles, e.g. choose high contrast, dark contrast, high/low saturation;
• Hide images and disable sounds, stop animations or highlight focus;
• Choose profiles that modify the web page to suit the specific needs of certain user groups. For example, it is possible to find ADHD-friendly profiles that seek to improve the user experience for users with attention deficit hyperactivity disorder;
• Improve keyboard navigation or optimize the website for screen reader users.

Depending on the technology used, they can also fix the source code of the website, although the effectiveness and appropriateness of these interventions is still a matter of debate among accessibility experts.

In short, accessibility overlays offer functionalities and options that aim to improve the accessibility, usability and conformity of a website, but which are often features already used by users of assistive technologies.

Can we rely on automatic tools when it comes to accessibility?

Automated tools are an essential ally for accessibility experts and provide valuable support during the analysis and remediation of the accessibility of websites and mobile applications. However, it is also true that, at the current state of the art, they are only able to detect a small percentage of accessibility issues. The community of accessibility experts agrees that automated tools can recognize about 30-40% of accessibility issues; estimates may vary, but in general they lie below 50%.

For example, automated accessibility evaluation tools can quickly identify all images that do not have alternative text, but they cannot assess the goodness or appropriateness of the alternative text, or whether an image should be considered decorative; they cannot check whether all website functionalities are operable with the keyboard, or whether the keyboard focus moves correctly between interactive elements. These checks necessarily require the intervention of an accessibility expert.

This is not surprising, since accessibility does not only concern technical aspects such as HTML, CSS or JavaScript (i.e., code) but, above all, the human experience. Accessibility and assistive technology experts play a key role in assessing the accessibility of digital content, as reiterated by the WCAG itself: “WCAG 2.1 […] is designed to apply broadly to different Web technologies now and in the future, and to be testable with a combination of automated testing and human evaluation”.

Fixing accessibility issues requires an additional step: not only must the automated tool identify accessibility problems, it must also develop a robust strategy to fix them and apply this strategy in a way that does not disrupt the planned user experience of the original website design.

Accessibility overlays only improve the accessibility of a website as long as they are active. If the overlay is removed, e.g. if its maintenance becomes too onerous, no trace of previous accessibility efforts and commitments will remain and the website will revert to the same level of accessibility it had before the overlay was installed. Changes made to a website by these tools are not permanent.

Users who use assistive technologies or who need specific functionalities need them all the time and not only to navigate a single specific website. They also need these features to interact with their operating system and other software installed on it. Consequently, it is very likely that they already have customized settings on their devices and already use a screen reader, so the functionalities commonly offered by widgets is, at best, redundant.

In many cases, people using assistive technologies have reported having problems navigating websites with accessibility overlays, claiming that sometimes the widgets themselves are not accessible. In these cases, accessibility overlays hinder the use and navigation of the website.

WebAIM’s most recent survey of web accessibility practitioners in 2021 included a question regarding the effectiveness of overlays, plugins and widgets. Quoting the survey results, “67% of respondents rated these tools as not at all or not very effective. Respondents with disabilities were even less favorable, with 72% rating them as not at all or not very effective and only 2.4% rating them as very effective”.

A new survey, Web Accessibility Global Usage Survey by Americaneagle.com, is still open. The results are expected to be released by 2023. This was presented at the 2023 edition of CSUN – Assistive Technology Conference: the overall experience with overlays was rated “poor” by 72% of respondents, “okay” by 20% and good “great” by 8% (the slideshow is available online).

Accessibility is a journey

Although overlays may enable certain functionalities, they fail to integrate full accessibility that considers the needs of users at all the different stages of website design and implementation. They come at the end, when some problems may be objectively more difficult or even impossible to solve. Overlays may be a useful temporary solution, but they are unlikely to be the final answer to providing users with a fully accessible experience, or to be compliant with WCAG, the Web Accessibility Directive, the EAA or other national and international Web accessibility regulations.

Accessibility is a journey and should not be considered only at the end. It is no coincidence that even regulations refer to paradigms such as born accessible and design for all: designing and creating services that are conceived, developed and maintained to be accessible to all users from the beginning.