Automatic a11y testing with axe

Slack time results

Transcript

1. Automatic a11y testing with axe Slack time results Niklas
2. 2 Why automatic tests? … instead of linting or manual integration testing? • catch bugs earlier (they promise ~30 - 57 %) • test on rendered HTML • test against WCAG 2.0 and 2.1 on level A and AA • Note: this not replaces testing the interface with the assistive technologies that real users use
3. 3 Why axe? https://github.com/dequelabs/axe-core#about-axe---our-manifesto • open source • works on all modern browsers and with whatever tools, frameworks, libraries and environments you use today • integrates with your existing functional/acceptance automated tests • automatically determines which rules to run based on the evaluation context • highly configurable
4. 4 Why axe? https://github.com/dequelabs/axe-core#about-axe---our-manifesto • fits nicely into our existing testing infrastructures ◦ React with enzyme ◦ React with react testing library • did not tested it yet with chai-only setups
5. 5 A - Unit test style https://github.com/bpmn-io/properties-panel/tree/a11y-tests
6. 6 A - Unit test style https://github.com/bpmn-io/properties-panel/tree/a11y-tests • one incomplete found: form-field-multiple-labels (toggle switch) Using the best-practice rules, cf. Design docs
7. 7 A - Unit test style <Demo />
8. 8 B - Integration test style https://github.com/bpmn-io/bpmn-js-properties-panel/tree/a11y-tests • one violation found: duplicate-id-aria (multiple panels) • one incomplete found: color-contrast Using the best-practice rules, cf. Design docs
9. 9 B - Integration test style <Demo />
10. 10 B - Integration test style https://github.com/camunda/camunda-modeler/tree/a11y-tests • one violation found: region (tab bar) Using the best-practice rules, cf. Design docs
11. 11 Summary and learnings integration tests • scenario needs to be bootstrapped properly • cf. our screenshots project (spectron) • check more rules as the tested DOM is bigger unit test styles • repeat easily with less lines of code • good practice when creating reusable components • amount of tested rules is not that high
12. 12 Find results here https://github.com/bpmn-io/properties-panel/tree/a11y-tests https://github.com/bpmn-io/bpmn-js-properties-panel/tree/a11y-tests https://github.com/camunda/camunda-modeler/tree/a11y-tests Follow up: • decide to to bring these tests into our projects, and / or • evaluate the list of broken rules
13. Thank you!