Accessibility Testing

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.