Building a design strategy for more accessible Design Systems

A presentation at Sketch & Design - Munich in March 2020 in by Damien Senger

Slide 1

BUILDING A STRATEGY FOR MORE ACCESSIBLE DESIGN SYSTEMS Sketch Meetup • Munich • March 25, 2020

Slide 2

Slide 3

Slide 4

Hej! 👋 I’m Damien.

Slide 5

Hej! 👋 I’m Damien. I am a queer Web worker, designing design systems and trying to make accessibility more accessible. I work for Castor in Amsterdam as a Design systems & Accessibility Lead. Oh, and my pronouns are they/them.

Slide 6

Let’s talk about crushing dreams.

Slide 7

Let’s talk about frustrations.

Slide 8

In other words, let’s talk about design systems & accessibility.

Slide 9

Design systems & accessibility: a reality check. 1.

Slide 10

Photo by Balázs Kétyi on Unsplash

Slide 11

Slide 12

Accessibility is complex. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 13

Design systems will not make accessibility easier or less complex. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 14

A good code can’t make a bad design accessible. A good design can’t make a bad content accessible. A good content can’t make a bad idea accessible. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 15

Even with accessible components, you can easily mess-up the end result. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 16

And don’t consider fixing accessibility later. It is always way more expensive. Way more. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 17

Let’s do a test!

Slide 18

✍ Is there any user generated content? ♿ Are your teammates trained on accessibility? 🎨 How accessible is the brand colour palette? 🕹 Do you have a device lab with assistive techs? 🎪 Do you have stakeholders? Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 19

Slide 20

You’re doomed. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 21

But relax, we have cookies solutions. 🧘 Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 22

Accessibility is a team effort 2.

Slide 23

I am about to show you the footage of a designer trying to share UX feedback with engineers. No engineers were harmed in the making of this recording. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 24

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 25

As often, the key to more accessible products is your ability to communicate. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 26

If accessibility is not discussed with everybody, you will start working in isolation. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 27

Accessibility is about the global experience. Accessibility is about details. Accessibility is about everything. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 28

Slide 29

First, some basic accessibility requirements should be part of your definition of done. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 30

Being part of the definition of done will help your team to estimate the effort including it. (not as an additional package) Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 31

You should also align on what does it mean in your context to be accessible. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 32

Accessibility is not just a technical topic. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 33

Using accessible components is not enough to offer accessible experiences. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 34

Accessibility is not something we can automate. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 35

So what can we do?

Slide 36

Working with the atomic design principles can allow you to be more efficient Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 37

Atomic design by Brad Frost Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 38

Atoms are perfect to work on semantic. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 39

Molecules are a great place to work what’s invisible. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 40

Organisms are the place to be for user focus management and event handling. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 41

Templates can be the higher-level focusing on content order and user navigation. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 42

And for that: we need one important thing. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 43

Please create an environment where HTML & CSS are valued skills. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 44

HTML & CSS are complex languages, so create opportunities for people to learn more. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 45

HTML & CSS are also often a good opportunity for designers and engineers to sit together. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 46

Develop a team of accessibility champions with members in all teams and departments. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 47

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 48

These evangelists can help finding solutions or mentor colleagues as early as possible. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 49

#shareTheLove Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 50

These accessibility champions might not be experts, but people caring about this topic, ready to raise the subject when needed. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 51

Develop an environment where people are collaborating around QA tasks. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 52

⌨ Did you test the keyboard navigation? 🕹 Did you test it at least one assistive technology? 🤖 Did you run Accessibility Insights for Web? ✅ Are all tests successful? Any limitation? 🏃 Was the experience seamless each time? Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 53

With your team of champions, draft an accessibility policy. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 54

An accessibility policy is an important document about the goals, what’s supported and what’s not. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 55

You don’t need a complex document. You don’t even need a legally binding document. You just need to align, and document your goals. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 56

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 57

It will make clearer what, when and how to test accessibility. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 58

We all like having a single source of truth. That’s what this document is for. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 59

And it is a good starting point for a better design system documentation. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 60

Accessibility & documentation 4.

Slide 61

The Web Content Accessibility Guidelines are not really the most readable document ever. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 62

Your documentation should give context-aware guidance on how to deliver an accessible product. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 63

Let’s talk about design documentation

Slide 64

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 65

Each component should support and showcase all possible state. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 66

butterfly.com.au Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 67

You should provide product-specific guidelines. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 68

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 69

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 70

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 71

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 72

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 73

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 74

Having a page with all information can quickly be over-whelming and difficult to maintain. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 75

Prefer accessibility requirements per components: be context-aware and actionable. Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 76

It can be a set of technical requirements

Slide 77

But also some requirements regarding the user experience

Slide 78

We always think the experience for pointers, but what about keyboards?

Slide 79

If you design hover states, you definitely have time for focus states!

Slide 80

Also, remember that keyboard navigation is accessible, but also good for power users looking for more productivity

Slide 81

This kind of work is also a good opportunity to collaborate between designers and engineers to define everything invisible.

Slide 82

Any good examples? 5.

Slide 83

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 84

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 85

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 86

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 87

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 88

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 89

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 90

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 91

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 92

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 93

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 94

Sketch Munich Meetup • March 2020 • @iamhiwelo

Slide 95

🎉 In conclusion…

Slide 96

Accessibility is as fun as frustrating. 1.

Slide 97

Setup an accessibility policy. 2.

Slide 98

Offer ways to learn more about a11y. 3.

Slide 99

Build a team of evangelists. 4.

Slide 100

Propose a documentation adapted to the product 5.

Slide 101

Develop a culture of test regardless the job title. 6.

Slide 102

Bedankt! 🇳🇱 Merci beaucoup ! 🇫🇷 Tack så mycket! 🇸🇪 Thank you! 🇬🇧 Tusen takk! 🇳🇴 Vielen Dank! 🇩🇪 @iamhiwelo

Slide 103

Damien Senger Queer Web worker, designing design systems and trying to make accessibility more accessible. raccoon.studio • noti.st/hiwelo @iamhiwelo