Tools for Developing Accessible Websites
Building websites that are accessible can be challenging for developers like myself that have never had to use any assistive technologies. Unlike visual issues such as layout which can be easily seen, accessibility issues can very easily go unnoticed if we don't have the correct tools to test for them.
Accessibility doesn't have to be perfect, it just needs to be a little bit better than yesterday.
There are a few tools I use regularly for this purpose that greatly help, so I thought I would share them. Because I do the vast majority of my development in Chrome, this list is biased to tools for Chrome in particular.
Accessibility Developer Tools #
Accessibility Developer Tools is an extension for Google Chrome created by the Google Accessibility team. The extension adds an extra panel in the developer tools drawer called "Audits". In this panel, we can run Audits on the page related to Network Utilization, Web Page Performance, and of course Accessibility.
The Accessibility Audit will test the web page against a pre-defined list of accessibility checks. It will list, in order of importance, any critical issues that need to be fixed, as well as the tests that were passed by the page.
In addition to the Accessibility Audit, we can inspect any particular element’s accessibility properties in the element inspector. There is a new panel added to the element inspector called "Accessibility Properties", which will list any properties relevant to the particular element.
Accessibility Inspector #
As part of an internal Chrome experiment, an Accessibility Inspector has been available in the Chrome Developer Tools (hidden behind a flag).
The Accessibility Inspector is an extra panel in the element inspector, called "Accessibility". This allows us to inspect particular elements on the page and receive information on it's accessibility properties. Unlike the Accessibility Developer Tools extension, this tool is able to offer us much more in-depth information about an element's accessibility properties due to greater access to the Accessibility API.
Tenon #
Tenon is an extremely useful tool that can identify WCAG 2.0 and Section 508 issues in any environment, from local development to production. It is actually an API you pay to have access to, which can be integrated in your development workflow, giving in-depth accessibility analyses every step of the development.
Additionally, there is also a free online tool that will produce an accessibility report on any web page or even snippet of code.
Chrome Vox #
Ensuring a website works well on screen readers can be a bit of a guessing game for developers that don't already use screen readers. Chrome Vox is a simple and easy-to-use screen reader for Google Chrome that can be installed as an extension. Once enabled, it will allow you to navigate any web page through it.
Here's a demo of me using it to navigate the homepage of this blog -
Even though not all screen readers work in the same way, Chrome Vox is a simple one to get started and experience what it is like to use a screen reader.
High Contrast (Extension) #
High Contrast is an extension for Google Chrome that allows you to change the colour schemes of any page to a high contrast one. Viewing a website through one of these filters can be helpful when making colour choices.
Your Keyboard #
Finally, one of the simplest and most useful ways to test a website is to try navigating it with only a keyboard, no pointing device.