a11y testing Knowledge exchange Niklas Kiefer

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

Disclaimer a11y testing doesn’t make your web content accessible!

No content

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

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

Tab like crazy

Tab like crazy

Tab like crazy: automatic? https://github.com/bpmn-io/bpmn-js-properties-panel/pull/703

Dev tools

Automatic testing ● unit tests - test your components ● integration tests - test a “real world” example

Unit tests

Unit tests ● test helper ● axe core

Unit tests

Unit tests

Integration tests ● bootstrap a realistic scenario with multiple components ● run the same test suite with axe-core ● example: BPMN properties panel

Automatic testing Recommendation: Use unit tests over integration tests to cover the most important a11y basics.

How others do: Carbon ● Accessibility – Carbon Design System ● IBM accessibility requirements

● Package: accessibility-checker ● Example: Radio Button How others do: Carbon

What’s more ● Training - Accessible Code ● Find some notes in this Miro board

Thank you! Any questions?