a11y testing

Knowledge exchange

Transcript

1. a11y testing Knowledge exchange Niklas Kiefer
2. What’s in • why it matters • different testing strategies ◦ manual vs. automatic testing ◦ unit vs. integration testing • how others are doing it ◦ Desktop Modeler & bpmn-io team ◦ Carbon • code examples
3. Disclaimer a11y testing doesn’t make your web content accessible!
5. a11y testing - why it matters • regularly test your components against a set of defined rules and best practices • automatic testing: catch bugs earlier ◦ “find on average 57% of WCAG issues automatically”, cf. https://github.com/dequelabs/axe-core • get a better understanding of how our products works for a wider range of users
6. Manual testing • tab like crazy • regularly use screen reader or voice recognition tools ◦ macOS build in features • use dev tools ◦ axe dev tools ◦ Google Lighthouse
7. Tab like crazy
8. Tab like crazy
9. Tab like crazy: automatic? https://github.com/bpmn-io/bpmn-js-properties-panel/pull/703
10. Dev tools
11. Automatic testing • unit tests - test your components • integration tests - test a “real world” example
12. Unit tests
13. Unit tests • test helper • axe core
14. Unit tests
15. Unit tests
16. Integration tests • bootstrap a realistic scenario with multiple components • run the same test suite with axe-core • example: BPMN properties panel
17. Automatic testing Recommendation: Use unit tests over integration tests to cover the most important a11y basics.
18. How others do: Carbon • Accessibility – Carbon Design System • IBM accessibility requirements
19. • Package: accessibility-checker • Example: Radio Button How others do: Carbon
20. What’s more • Training - Accessible Code • Find some notes in this Miro board
21. Thank you! Any questions?