Tech Talk: a11y testing at the HTO team

Slide 1

Slide 1 text

a11y testing at HTO Tech Talk Niklas Kiefer

Slide 2

Slide 2 text

What’s in ● Why a11y testing matters ● Different strategies for your development routines ○ manual vs. automatic testing ○ unit vs. integration testing ● Code examples

Slide 3

Slide 3 text

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 beneﬁts 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

Slide 4

Slide 4 text

a11y testing - Why it matters ● regularly test your components against a set of deﬁned rules and best practices ● automatic testing: catch bugs earlier ○ “ﬁnd 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Manual testing

Slide 8

Slide 8 text

Manual testing ● Tab like crazy ● Use dev tools ● Use screen readers or voice recognition tools ● Conduct a11y audits

Slide 9

Slide 9 text

Tab like crazy

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Dev tools ● axe DevTools ● Google Lighthouse ● IBM accessibility checker (Carbon)

Slide 12

Slide 12 text

axe DevTools

Slide 13

Slide 13 text

Google Lighthouse

Slide 14

Slide 14 text

IBM accessibility checker

Slide 15

Slide 15 text

Use screen readers ● NVDA ● JAWS ● VoiceOver

Slide 16

Slide 16 text

Conduct a11y audits ● Use the techniques mentioned before ● Collect critical a11y issues ● Act on them ● Example

Slide 17

Slide 17 text

Automated testing

Slide 18

Slide 18 text

Automated testing ● Unit tests - test your components ● Integration tests - test Tasklist e2e scenarios

Slide 19

Slide 19 text

Unit tests

Slide 20

Slide 20 text

Unit tests ● Test helper ● axe core

Slide 21

Slide 21 text

Unit tests ● React testing library

Slide 22

Slide 22 text

Integration tests

Slide 23

Slide 23 text

Integration tests

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

● HTO team docs ● Web Content Accessibility Guidelines ● Carbon a11y guidelines ● axe dev tools Helpful resources

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Thank you! Any questions?