Every day, the importance of inclusion in the design of websites, applications, and web content becomes more obvious. 15% of the world’s population lives with disabilities that hinder them from accessing the web, and this number is set to increase. With such a high number of people, accessibility must become a high priority when creating websites and digital content.
Government agencies and private-sector organizations are required by law to adhere to digital accessibility laws and ensure their websites are accessible. Examples of these include the Americans with Disabilities Act (ADA) and Section 508 in the United States where about 26% of the people are disabled. Europe has EN 301 549, the U.K. ensures equal access with the Equality Act of 2010 (EQA) while AODA currently stands out among many provincial laws in Canada.
U.S. web accessibility lawsuits have continued to grow in 2020, with an increase in state-filed accessibility suits and app-related legal claims opening organizations to financial liabilities and damage to brand reputation. Hundreds of organizations (especially in retail businesses and the food industry) are being targeted for non-compliance with the ADA, yet accessibility remains a problem. This can be attributed to a lack of knowledge or negligence.
There are many approaches to digital accessibility solutions to help organizations achieve compliance with automated solutions becoming the most prominent one in recent years. For any website to be accessible, it must conform to the most current version of the Web Content Accessibility Guidelines (WCAG). The WCAG standard not only helps make web content accessible to people with disabilities. It also ensures web content is properly accessible even across multiple devices.
As a more updated version of the guideline, WCAG 2.1 clearly provides a wide range of recommendations for making web content more accessible to a wider range of persons with disabilities; including those with visual, auditory, cognitive, motor, speech, and neurological disabilities.
Accessibility should be incorporated early to achieve accessible web design and development. Early adoption will require an accessibility audit– a detailed report and a holistic view of your digital products’ accessibility. The report will be used by your IT team to manually remove accessibility barriers. The concept of remediating your site is referred to as a manual accessibility solution. As the oldest form of making a website accessible, it is reliable but takes time.
Thanks to technology, there are now other solutions for website accessibility (including testing) such as custom JavaScript accessibility overlays and tool-based overlays both of which modify the markup of the site when the user views it. Let’s learn about accessibility overlays and look at different types in detail.
What are Accessibility Overlays?
Accessibility overlay tools are automated software solutions that detect and attempt to fix web accessibility issues by “overlaying” additional code on the webpage. Overlay tools work by modifying the code of a web page with a snippet of JavaScript and usually come in the form of a toolbar, plugin, app, or widget. The overlay code is applied after the website or web app is rendered by the browser, to transform it.
Overlays are tempting for organizations and businesses looking for a fast and inexpensive solution to accessibility compliance.
Types of Accessibility Overlays
Accessibility Tool-based Overlays
An accessibility toolbar is a small piece of JavaScript code that you can add to your website. When added to the site, it displays a set of accessibility tools that website users can use to change the usability or what the site looks like. Such toolbars or plugins/extensions include features to increase the size of fonts or change the font type to make the website easier to read. It can also allow users to alter contrast, and highlight links, and headers in order to make the website easier to read. Although operating systems and browsers offer this functionality built-in, the software solution also scans websites regularly to identify updates and apply fixes, automatically.
Accessibility toolbars specifically help users personalize the website based on the individual’s requirements and experience your site as they deem fit. However, the accessibility toolbar alone does not and cannot fully make any website WCAG-compliant. They can only be useful to users with partial impairments since a totally blind user cannot see the text on the site let alone decide if the font is too small or the contrast between text and background is too low.
Custom JavaScript Accessibility Overlays
Like tool-based overlays, Custom Javascript Overlays is also a piece of code to be injected into an existing website. Custom overlays also alter the way the website is displayed but don’t require a website user to select options to make the site more accessible. A custom overlay can be customized to the specific page and website and automatically evaluates the website’s code to identify accessibility issues, and automatically fix them before the content reaches the screen. Custom overlays are also limited; they can’t fix color contrast issues among other issues with images. More so, a little change on the site could break the custom overlay.
Since custom overlay auto-remediates, website visitors will only see a fixed website, unlike the tool-based overlay. Once the site loads, web users, including assistive technologies (e.g. screen reader) users, will be able to navigate the website without needing to manually tweak the accessibility options.
Use Cases for Overlays
Accessibility overlays on websites are meant to address visual accessibility issues. Advanced overlays can add text alternatives to the page or add missing accessibility semantics without touching the underlying source code of your website or application although not reliably fixable. Its most appropriate use case would be supporting an already-remediated site.
The more expensive Custom Javascript accessibility overlays on the other hand represent a quick-fix or short-term solution. It can be useful in the case your organization is working on a long-term fix but needs to resolve a critical accessibility defect immediately as in the case of a legal complaint or lawsuit or even when your organization needs to sell its product to organizations that require your website’s accessibility (such as the Federal Government). It also makes sense to use custom overlays to achieve the accessibility of third-party services on your website when you don’t have access to the source code. Truth be told, the first two use cases for custom overlays are pretty unethical but well…
Conclusion
Ideally, development teams should be writing or rewriting source code that complies with WCAG 2.1 AA success criteria. Incorporating accessibility from the very beginning (of the development process) is known as a “shift left” approach within the accessibility industry whereas “shift right” is the application of accessibility overlays for a quick-fix and leaving accessibility to the end process. However, leaving accessibility late should not mean the end of the world.
Overlays are especially essential for a quick fix. They are most useful when there is a threat of legal complaint or lawsuit to remind your organization about the need for your website to be accessible to persons with disabilities. Accessibility overlays can’t fix all of the accessibility violations on the site (even with the power of artificial intelligence and machine learning techniques).
Accessibility advocates say overlays are not acceptable substitutes for developing accessible websites. In March, a petition called the Overlay Fact Sheet began circulating, which called on websites to stop relying on overlays as quick fixes for accessibility issues.
With all said, one shouldn’t be quick to write off the advanced solution because they are part of an overall solution. They offer innovation and efficiency and serve as entry points in form of website testing, to be supported by manual website testing, monitoring, and expert adjustments.
Automated tools like overlays are supposed to aid manual accessibility testing and adjustment efforts, not replace them.
