Auditing your site for accessibility: now what?

Caveats

1: Identify

Screenshot of 2017 PyOhio site

Screenshot of 2018 PyOhio site, circa June

1: Identify

Quick and easy method browser extensions

  • WAVE
  • aXe
  • Lighthouse

Automation can only catch about 1/3 of potential accessibility issues

2: Verify

2: Verify

What kinds of manual tests can we do?

  • Keyboard
  • Screen reader
  • Browser zoom
  • Touch devices

3: Plan

3: Plan

Many small changes? Organize by page or flow

Many large changes? Incremental updates (long-term feature branch)

3: Plan

Set goals per release

  • Percentage or numeric value of defects closed
  • No regressions in a particular area
  • 1+ new thing learned per feature

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

4: Due Diligence

  • Keep fixing
  • Keep testing
  • Future proofing

4: Due Diligence

Pa11y http://pa11y.org

Resources

WAVE https://wave.webaim.org/about

Resources

aXe https://www.deque.com/axe/

Resources

Lighthouse https://developers.google.com/web/tools/lighthouse/

Resources

Pa11y http://pa11y.org

🎉