A presentation at BrumJS: May 2018 in in Birmingham, UK by Dan Matthew
Accessibility Testing
Accessibility Basics Alt text Document structure Semantics Keyboard interactivity Focus management Colour contrast
Bake it in from the start… To p t i p
…it’s easier
Manual testing Important. Can stick as many attributes as you like, but does it actually improve the experience?
Tab through a page with the keyboard Can you reach and operate interactive controls without a mouse? Can you see where focus is? Using only keyboard can you open a modal; interact with content; continue easily? http://gov.uk
http://edenspiekermann.github.io/a11y-dialog/example/
Use a screenreader https://github.com
Semi-automated testing Browser tools Structure Contrast
Let’s do an audit Anybody want to volunteer their site?
Properly automated testing Deciding on what tests to automate The basics could be the core flows of your application Decide when to automate Find sweet spot between manual testing and automation
Unit tests Watched ARIA properties Ensure attributes are set initially Ensure they change when state changes
Integration tests
Use to emulate a page-level experience
Write tests for each state of the page
Te s t f o c u s
For any part of your app that can be manipulated through hover, mousedown, or touch, consider how a keyboard or
screen-reader user could achieve the same goal. Then write it into your tests.
Use aXe / Pa11y
Accessibility test APIs free devs from writing boilerplate which is easy to get wrong
Has webdriver integration for use on browser of your choice
Integration test ensuring the correct element is in focus
Integration test on a page that runs aXe and ensures there are no violations If using something like Storybook for your components, this might the perfect location to view any violations
Real user feedback Automated testing can only get you so far No substitute for manual testing Cover basics with automated testing Usability tests early on At design time
Summary Use keyboard & screenreader Browser plugins Unit tests Integration tests Automated tests can help free up your team from manually testing every part A11y coverage communicates code quality Prevents regressions …BUT.. automated tests are no substitute for regular manual testing, and with actual users.
The following code examples from the presentation can be tried out live.
for free. You
can too.