Tech Talk: a11y testing at the HTO team

Camunda Tech Talk

Transcript

1. a11y testing at HTO Tech Talk Niklas Kiefer
2. What’s in • Why a11y testing matters • Different strategies for your development routines ◦ manual vs. automatic testing ◦ unit vs. integration testing • Code examples
3. Accessibility (a11y) “Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.” https://developer.mozilla.org/en-US/docs/Learn/Accessib ility/What_is_accessibility
4. 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
5. Disclaimer a11y testing doesn’t make your web content accessible!
7. Manual testing
8. Manual testing • Tab like crazy • Use dev tools • Use screen readers or voice recognition tools • Conduct a11y audits
9. Tab like crazy
10. Tab like crazy: automatic? https://github.com/bpmn-io/bpmn-js-properties-panel/pull/703
11. Dev tools • axe DevTools • Google Lighthouse • IBM accessibility checker (Carbon)
12. axe DevTools
13. Google Lighthouse
14. IBM accessibility checker
15. Use screen readers • NVDA • JAWS • VoiceOver
16. Conduct a11y audits • Use the techniques mentioned before • Collect critical a11y issues • Act on them • Example
17. Automated testing
18. Automated testing • Unit tests - test your components • Integration tests - test Tasklist e2e scenarios
19. Unit tests
20. Unit tests • Test helper • axe core
21. Unit tests • React testing library
22. Integration tests
23. Integration tests
24. How others do: Carbon • Accessibility – Carbon Design System • IBM accessibility requirements
25. • Package: accessibility-checker • Example: Radio Button How others do: Carbon
26. • HTO team docs • Web Content Accessibility Guidelines • Carbon a11y guidelines • axe dev tools Helpful resources
27. What’s more • Training - Accessible Code • Find some notes in this Miro board
28. Thank you! Any questions?