Tools of the Trade
Getting StartedFor a primer or refresher on what the Web Accessibility Initiative (WAI) is review the W3 Org website and its associated entries on this subject at https://www.w3.org/WAI/.
Checkers and ToolsW3 Org offers a great list of available tools for developers to use when checking content for accessibility conformance at https://www.w3.org/WAI/ER/tools/. Various filters can be applied to this list, in order to narrow-down best options. For this article, I applied the following filters:
- Guidelines > WCAG 2.0 - W3C Web Content Accessibility Guidelines 2.0
- Languages > English
- License > Free and License > Open Source
- AChecker by Inclusive Design Research Centre http://achecker.ca/checker/index.php
- aXe Chrome plugin by Deque Systems
- Total Validator by Total Validator http://www.totalvalidator.com/
- WAVE by WebAIM http://wave.webaim.org/
- Accessibility Developer Tools by Google Accessibility https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
- Functional Accessibility Evaluator by University of Illinois http://fae20.cita.illinois.edu/
Standalone ToolsFrom the W3 Org's filtered list of tools, a handful standout as easy-to-use and/or offered meaningful accessibility inspection: AChecker (which comes up very high on a regular Google search of "aa accessibility checker", interestingly), Total Validator, and Functional Accessibility Evaluator ("FAE").
|Entering URL of webpage on AChecker website|
Total ValidatorTotal Validator must be downloaded and installed. Additionally, the web page must be available locally or at least where it can be browsed to. I feel this limits the tool somewhat - as a developer, I'm not always able to edit files locally. While results were comprehensive, the 'Basic' license (available for free) suggests better/more support available with a 'Pro' (paid-for) license. Results were automatically saved locally to an HTML file.
Total Validator makes a good case for using it, above other validation tools, which you can review at: https://www.totalvalidator.com/home/whytv.html.
|Must choose local HTML file with Total Validator|
Functional Accessibility EvaluatorThe Functional Accessibility Evaluator (now migrated to v2.0), which requires a free login (to test entire websites, but no login required for testing a single webpage), is quite robust, has a nice, clean-looking UI, and allows generated reports to be emailed (using your device's default mail system, such as Outlook or similar).
Use AInspector Sidebar to view dynamic and element level results. AInspector Sidebar gives a more accurate evaluation of the DOM than FAE 2.0, since it accesses the live DOM of Firefox, FAE 2.0 uses a server based DOM emulator that does not always have the same state or information of the live DOM of a desktop browser.
|FAE 2.0's UI is clean-looking and easy to use.|
Browser-Based Extensions & Plug-in ToolsI also found some extensions/add-ons for Chrome and Firefox:
Accessibility Developer Tools
This Chrome extension by Google Accessibility is a very robust accessibility checker. Once installed, this extension is available from inside the 'Audits' tab of Chrome DevTools. The tool prioritizes items that fail conformance need manual (human) checking. Additionally, expanding these results reveals the item-in-question on-screen and provides a link for more information, should you wish to research the accessibility standard more.
|Google's Accessibility Checker in DevTools shows item being evaluated.|
This Firefox add-on - https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/ - is recommended by the standalone tool, FAE 2.0. It is easy to deploy by a simple click inside Firefox and its UI is refined and clean-looking. Results can be filtered in various ways depending on what you're looking for and selecting the 'Details' button allows you to drill-down to the items being evaluated - even opening up Mozilla's Web Developer tool window so you can see the code and/or highlight the reviewed item.
|AInspector Sidebar provides a simple interface, various views, and allows a deep drill-down to the specific code of items.|
ConclusionEach of these tools stand out as robust testing tools for checking accessibility. Each handle the display and reporting a bit differently, so some of it is about personal preference.
FAE 2.0 was the best-looking and easiest to use UI among the standalone tools. From the browser-based tools, though AInspector does not offer report-generation, it is easy to use and reveals the needed code (via Firefox's Web Developer tools), with a simple double-click. Thus, using both AInspector in conjunction with FAE 2.0 seems to be the best choice for checking and validating conformance to WCAG 2.0 accessibility.