Sweet Savory Fresh! Accessible design system Storybook tests

A presentation at React Alicante 2024 in September 2024 in Alicante, Spain by Kathleen McMahon

Slide 1

Slide 1

Slide 2

Slide 2

Bienvenidos a todos!

Slide 3

Slide 3

@resource11 Twitter | Instagram | GitHub

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Design Systems are ALWAYS the hotness

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Why accessibility?

Slide 10

Slide 10

Vision Sensory Hearing Language Inclusive Design Persona Spectrum (CC BY-NC-SA 2.0) Motor Cognitive Low bandwidth

Slide 11

Slide 11

February 2024 WebAIM Million An accessibility analysis of the top 1,000,000 home pages

Slide 12

Slide 12

February 2024 11.8% Increase in added ARIA attributes

Slide 13

Slide 13

February 2024 34.2% More detected errors than those without ARIA present

Slide 14

Slide 14

What can we do about this?

Slide 15

Slide 15

WordPress

Slide 16

Slide 16

Slide 17

Slide 17

Why Storybook testing?

Slide 18

Slide 18

Accessibility is Fresh

Slide 19

Slide 19

Component-driven development

Slide 20

Slide 20

Component Story Format

Slide 21

Slide 21

Slide 22

Slide 22

@storybook/a11y-addon

Slide 23

Slide 23

@storybook/axe-playwright

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Works with the accessibility tree

Slide 27

Slide 27

Manual testing needed

Slide 28

Slide 28

Accessibility is Fresh

Slide 29

Slide 29

Thank you.

Slide 30

Slide 30

Gracias.

Slide 31

Slide 31

@resource11 Twitter | Instagram | GitHub

Slide 32

Slide 32