Adding Accessibility Testing to your Auditing Process
I admit accessibility hasn’t always been top of mind when developing projects for myself and my clients. Thoughts from “it’s a visual site” to “it’s not required” pop into my head or out of the client’s mouth. The required part is dependent on the kind of client they are and whoever is interpreting the existing laws. That’s for another time.
Now, when evaluating an existing site or testing a new platform, page builder, plugin I run a couple of quick tests. It makes the difference between being excited to work on something and running away (or charging more money.) Some things are easy to take care of, some can be taken care of by light coding adjustments, and then others have to do with the platform or plugin.
Tools
Accessibility Insights - https://accessibilityinsights.io/
This is a tool put out by Microsoft. It has 2 ways to run tests. FastPass is the quick test that’ll give you an idea about the state of the site. Assessment is a deeper dive into testing the site. You need to get paid for that one given the time involved since it measures compliance with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA success criteria.
Available for: Chrome, Windows
Axe - https://www.deque.com/axe/
Unlike Accessibility Insights, Axe lives within Chrome’s Developer Tools. It’s a bit geekier in that it tells you what’s wrong and the element but doesn’t offer any manual testing path.
Available for: Chrome, Firefox, Android
Lighthouse - Built into Chrome’s Developer Tools
Found under the Audits section, Lighthouse will identify common problems that affect your site’s performance and accessibility. It also gives you a score on how optimized your page is for SEO. While you can score a 100 on SEO you might be failing on accessibility. Considering how a more accessible site improves SEO I take the SEO score with a grain of salt.
Siteimprove Accessibility Test - http://bit.ly/2Z4jXt9
Siteimprove lives outside of Chrome’s Developer Tools. It is quite extensive in the information on what’s wrong and points to the WCAG 2.0 section on how to fix the problem. This extension if free however they do offer a paid service and they will keep asking you to sign up. One note about this in is that it flags what you need to manually look at within the results.
Available for: Chrome
Wave - https://wave.webaim.org/extension/
This tool is from the leading accessibility organizations on the web - WebAIM. While the interface is a bit old fashioned it is full of useful information on why something is wrong and how to fix it. They also filter by Section 508, WCAG 2.0 A, WCAG 2.0 AA.
Available for: Chrome, Firefox
Contrast Ratio - Built into Chrome’s Developer Tools
This one is a bit harder to find but once you do it’s quite useful. In the Elements section of Developer Tools under Styles you can click on a color swatch to bring up the color picker which shows you the contrast ratio on the element.
NoCoffee - http://bit.ly/2P3aFJx
This is a cool and scary tool that simulates varying degrees of vision issues.
Color Palette Checker Tools
Google Material - https://material.io/tools/color/#!/?view.left=1&view.right=0
Use All Five - https://abc.useallfive.com/
Colour Contrast Analyser - https://github.com/ThePacielloGroup/CCAe
Other Resources
A11ycasts video on auditing - https://youtu.be/cOmehxAU_4s
Drupal Con session on Voice Assistants - https://youtu.be/OgGFaTlP4mI
Drupal Con session on Why Accessibility Matters - https://youtu.be/Dpcn4Y6jRJA
W3's How to Meet WCAG 2 Quick Reference Tool - https://www.w3.org/WAI/WCAG21/quickref/
Using VoiceOver on a mac to test screen reading - https://webaim.org/articles/voiceover/
HTML5 Elements aka Landmarks - https://www.w3schools.com/html/html5_semantic_elements.asp
Landmark Examples - https://www.w3.org/TR/wai-aria-practices-1.1/examples/landmarks/main.html
Interesting article on lawsuits - https://www.fourkitchens.com/blog/development/dominos-pizza-legal-requirements-web-accessibility/
Testing Standards - https://www.w3.org/TR/act-rules-format/
From This Week in Accessibility - https://medium.com/@sheribyrnehaber/this-week-in-accessibility-robles-v-dominos-1af8fdb4ce8f
Website Accessibility & the Law - https://www.searchenginejournal.com/website-accessibility-law/285199/#close
Final Thoughts
Ultimately it's about trying to make the web usable for everyone. These tools help me to future proof the projects I work on. They will also help me to write better agreements. If the client is aware that it takes more time and money to implement but doesn't have the budget to add them at the moment then having the client sign-off on it helps lessen the responsibility (keep in mind I am not a lawyer). It also gives me an excuse to go back to them later for more work.
I love finding new tools and processes to make my work better. What tools have you discovered?
Let me know in the comments. Also let me know if you'd like a video walk though. Thank you!
