Accessibility Testing

A presentation at BrumJS: May 2018 in May 2018 in Birmingham, UK by Dan Matthew

Slide 1

Slide 1

Accessibility Testing

Slide 2

Slide 2

Accessibility Basics Alt text Document structure Semantics Keyboard interactivity Focus management Colour contrast

Slide 3

Slide 3

Bake it in from the start… To p t i p

Slide 4

Slide 4

…it’s easier

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Manual testing Important. Can stick as many attributes as you like, but does it actually improve the experience?

Slide 8

Slide 8

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/

Slide 9

Slide 9

Use a screenreader https://github.com

Slide 10

Slide 10

Semi-automated testing Browser tools Structure Contrast

Slide 11

Slide 11

Let’s do an audit Anybody want to volunteer their site?

Slide 12

Slide 12

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

Slide 13

Slide 13

Unit tests Watched ARIA properties Ensure attributes are set initially Ensure they change when state changes

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

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

Slide 17

Slide 17

Integration test ensuring the correct element is in focus

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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.