A presentation at North Bay Python in in Petaluma, CA, USA by Zach Passen
Auditing your site for accessibility: now what?
Caveats
1: Identify
Screenshot of 2017 PyOhio site
Screenshot of 2018 PyOhio site, circa June
Quick and easy method browser extensions
Automation can only catch about 1/3 of potential accessibility issues
2: Verify
What kinds of manual tests can we do?
3: Plan
Many small changes? Organize by page or flow
Many large changes? Incremental updates (long-term feature branch)
Set goals per release
Screenshot of site_base_onecolumn.html highlighting {% block body %}
Screenshot of site.js will all functions collapsed to highlight file length
Screenshot of site.js:handleHomeAlert() (showing short function)
Screenshot of site.js:handleSignupErrors() (showing long function)
Screenshot of site.js:handleSignupErrors(), with everything blurred except the comment describing the function
Screenshot of site.js:handleCommonTalkDataForm() (showing long but more direct function)
4: Due diligence
Pa11y http://pa11y.org
WAVE https://wave.webaim.org/about
aXe https://www.deque.com/axe/
Lighthouse https://developers.google.com/web/tools/lighthouse/
Pa11y http://pa11y.org
🎉
Web accessibility is important - about 1 in 5 people in the United States have some kind of disability, and not including them limits your reach. But once you've heard about the basics, how do you get started? In this talk, I'll walk you through the process of finding issues in your site, and discuss processes to fix them.
The following resources were mentioned during the presentation or are useful additional information.
GitHub repo for the PyOhio site - useful if you want to follow along at home or look for yourself 😉
WAVE provides an online tool as well as a browser extension for evaluating a page for WCAG compliance. The browser extension is available for Chrome and Firefox, and provides information on errors as well as explanations of why things are errors. It also includes a color contrast checker, which has a section for modifying colors in-extension to see if they pass contrast ratios.
aXe is a browser extension and command line tool that provides reporting similar to WAVE. The advantage aXe has over WAVE (in my opinion) is that the browser extension can be used on a page multiple times without refreshing, which helps with checking pages that require a POST.
Lighthouse is a tool that can be used in the browser, on the command line, or as a package to test out accessibility as well as things like performance and standards adherence. It can also test mobile views with a simulated throttled connection, which can help test out poor connection scenarios.
Pa11y is a package that can be used as a command line tool or a continuous integration add-on. It is able to spider through a website, and consume instructions to get behind authentication or perform other actions beyond reading a page on load.
for free. You
can too.