Over the past year or so, accessibility has become a hot topic in the web design industry. This should come as no surprise given the prevalence of visual, auditory, and physical impairments (to name only a few) among the general population worldwide. It’s up to designers and developers to find ways to create websites and web content that can be consumed by anyone, regardless of whether they live with an impairment or not.
While the following tools cannot entirely determine whether or not your site is accessible (this can only be truly accomplished through human assessment), they can help you on your path to accessibility by severely cutting down the time and effort it would take to implement a thorough evaluation. This will, in turn, help you identify and reduce the amount of accessibility barriers on your website and in your content — ultimately, improving its quality overall.
If you're designing for international audiences, be sure to check out our article on pseudo-localization to make the process easier.
To help you get started on the path to accessible web design, here are nine tools you can use to run simple accessibility audits on your websites and web content.
‘AChecker’ is a holistic accessibility testing tool used to evaluate the HTML content for a single web page. You can test your web pages by entering the URL, uploading an HTML file, or by pasting the source code directly into the tool. After submitting your page, ‘AChecker’ scans your HTML and quickly produces a report that identifies certain, likely, and potential accessibility problems. There are additional queries that ‘AChecker’ can run as well, including HTML and CSS validators, but you’ll reveal a lot about the accessibility of your site by running the standard diagnostic procedure alone.
‘Color Oracle’ is a free app that simulates various forms of colorblindness by adding a full-screen filter throughout your operating system (yes, it works with Windows, Mac OS, and Linux). Filter options are set to more severe forms of color blindness: deuteranopia, protanopia, and tritanopia. If your design passes with these filters, then you know it will also be easily readable by those with minor color blindness. Given that you can turn on these filters on the fly, this is the perfect tool for visual designers who want to evaluate their designs as they work.
This free, beta-tool allows you to test your web content to identify seizure risk, using an analysis engine built by the University of Wisconsin-Madison Trace Center. The process helps determine whether animations or video you use within your web content, are likely to cause seizures for users with epilepsy. If you’re looking for more tools, the Trace Center has a ton of other resources to help developers evaluate the accessibility of their work.
‘NoCoffee’ is a free extension for Google Chrome, which can be used to simulate a wide range of visual impairments including color blindness, low acuity, low contrast sensitivity, obstructed visual fields, and more. While ‘NoCoffee’ doesn’t necessarily evaluate and score your website as some other tools might, it will provide you with a unique perspective for how users with visual impairments experience your site.
‘Accessibility Developer Tools’ is a Chrome extension that adds a holistic accessibility audit, and sidebar pane, directly within Google Developer Tools (GDT). If you have GDT installed then running the audit is easy: you simply need to have the web page in question open in Chrome, navigate to the accessibility audit panel in Developer Tools, and hit “Run”. The audit will help you identify accessibility errors, including missing ARIA attributes, color contrast values, and much more. You can read the full list of audit rules, or suggest new features, by checking out the extension’s github repository.
This plugin will allow you to test the accessibility of your designs for users who are colorblind, while you work directly within Sketch. ‘Color Contrast Analyzer’ gives you the ability to calculate the color contrast ratio of two layers (or a single layer against the artboard), and evaluate that value against WCAG standards. After the test is complete, the plugin will provide you with a pass or fail rating based on WCAG’s AAA and AA color contrast requirements.
Similar to the plugin above, Adobe has taken the necessary steps to include colorblind accessibility proofing within its Photoshop and Illustrator software. The ‘Proof Setup’ filters allow you to see what your design will look like for users with different types of color blindness, specifically protanopia and deuteranopia. To simulate colorblindness on your design, simply look under the “View > Proof Setup > Color Blindness” menu and select either protanopia or deuteranopia. Yet again, another great solution for evaluating the accessibility of your design as you work!
‘WAVE’ is a free, community-built tool designed to facilitate web accessibility testing by providing developers with a visual representation of issues directly on their page. The holistic tests assess a ton of accessibility issues, ranging from color contrast to ARIA attributes, and are based on compliance standards from both WCAG and Section 508.
Very few tools exist that allow designers or developers to assess the accessibility of the auditory aspects of their web content. While not strictly an assessment tool, YouTube natively offers a resource that can help you boost accessibility within your video content. Closed captioning allows you to open up your video content to a larger audience — specifically those with hearing impairments, or those who speak languages other than the one used in your content. If you use YouTube to host or embed your video content, you can leverage their manual transcription and close captioning functionalities directly within the Video Manager.