By Keira Collin
An accessibility overlay is a visual representation of how your site will appear to someone with different types of disabilities. This overlay is designed to help you identify any potential issues in the design, content, and interactions on your website.
In this article, we will take a look at what an overlay is, when to use it and how, as well as some tools for making your own.
What is accessibility?
An accessible website can be accessed by anyone regardless of disability. This may appear particularly important for websites about disabilities or health conditions. However, even if your site doesn’t deal with these topics, you still need to make your site accessible (and search engine friendly) if you plan to attract and retain visitors. Many websites are dedicated to accessibility, such as WebAIM, A11Y, HTML5 Doctor, and The Paciello Group.
Why use an overlay?
Many designers feel comfortable testing their work, but how do we know what it looks like to someone with a disability? An accessibility overlay will tell you what is missing and hopefully provide ideas for fixing the problem.
When should I use an overlay?
You should always use an overlay when making changes – or adding new elements – to your website. It’s important to think of accessibility not just as something that happens when you’re designing but also if you’re performing maintenance or upgrading your website.
How to use an overlay?
There are many tools available for creating overlays. It’s important to experiment with different options so you can choose one that suits your needs best.
Here are some of the best options:
1) A11y Machine
A11y Machine is a JavaScript accessibility testing engine created by Nicolas Steenhout. It can be used to test any website, but it requires some setup before using it.
2) WAVE Web Accessibility Tool
WAVE (Web Accessibility Evaluation Tool) allows you to check the accessibility of your web pages. In addition, it has an outline mode, making it easier to work with large documents and touch devices.
3) Axs Tree
Axs Tree is another JavaScript accessibility testing engine by Nicolas Steenhout. This tool provides a menu where you can select the type of information displayed in the overlay, along with options for changing color and formatting.
4) The WAVE Chrome Extension
The WAVE Chrome Extension is an official Google project integrating into the Google Developer Tools Console. This allows you to check pages as they’re viewed rather than through a separate testing tool as with other tools listed here.
5) HTML CodeSniffer Accessibility Plugin
HTML CodeSniffer is a popular plugin for the popular web development tool Dreamweaver. The plugin helps you find possible accessibility problems in your code so they can be corrected before publishing.
6) Storybook
Storybook is a tool for creating and viewing accessible overlays from WAVE results. It works as a stand-alone web page and allows you to use your preferred browser and editor.
7) Overlay Creator
The Overlay Creator is a simple HTML code generation tool allowing you to specify elements and use WAVE data to create an accessible overlay.
