Using accessibility as a bridge between design & development

A presentation at Abstractions II in August 2019 in Pittsburgh, PA, USA by Damien Senger

Slide 1

Slide 1

USING ACCESSIBILITY AS A BRIDGE BETWEEN DESIGNERS AND ENGINEERS Abstractions • Pittsburgh, PA • August 22, 2019

Slide 2

Slide 2

Hi! 👋 I’m Damien. I am a queer designer who codes, specialised in accessibility. I work for Castor EDC in Amsterdam, NL as a Design systems & Accessibility Lead. I use they/them pronouns.

Slide 3

Slide 3

Content warnings ⚠ I am known to use a colourful language, so please pardon my French! 🤭 There will be videos (with sound). 🎹 Usually, my sense of time is really bad. And also, raccoons? 🦝 ⏳

Slide 4

Slide 4

A bit of background first

Slide 5

Slide 5

💾 I built my first website in 2004 💸 I sold my first web project and worked as a freelancer since 2012 🗳 I designed & developed a SaaS product between 2014 and 2015 for a political startup helping local leftist candidate to get elected * I worked equally as a designer and as an engineer since + I moved to the Netherlands as an engineer end of 2016 🎨 I decided to focus only on design and stop shipping code in 2017 👾 I changed my mind at least 10 times since role=drinks • June 2019 • @iamhiwelo

Slide 6

Slide 6

And buckle up, it’s getting worse ✌ Abstractions • August 2019 • @iamhiwelo

Slide 7

Slide 7

/ I joined my current job as Product Designer, in the product team 🤬 I complained a lot about “raised issues” regarding the HTML/CSS and the lack of accessibility of our product 📚 I became an IAAP certified Web Accessibility Specialist take this in the face impostor syndrome 2 3 I started fixing the low-hanging fruits in the code base 💥 🧱 I am now building and leading the design system for our products 😅 role=drinks • June 2019 • @iamhiwelo

Slide 8

Slide 8

In the end, there is only one thing I’m sure about: I’ve always struggled to define what my job is. Abstractions • August 2019 • @iamhiwelo

Slide 9

Slide 9

And you know what? I am not the only one. Abstractions • August 2019 • @iamhiwelo

Slide 10

Slide 10

But, what’s the point with today’s talk? Abstractions • August 2019 • @iamhiwelo

Slide 11

Slide 11

Design & Engineering: how is it going?

Slide 12

Slide 12

I am about to show you the footage of a designer trying to interact with engineers. No engineers were harmed in the making of this recording. Abstractions • August 2019 • @iamhiwelo

Slide 13

Slide 13

Abstractions • August 2019 • @iamhiwelo

Slide 14

Slide 14

Our industry accepted people working in silos making the collaboration harder. Abstractions • August 2019 • @iamhiwelo

Slide 15

Slide 15

Our industry accepted a situation where designers and engineers started speaking two different languages. Abstractions • August 2019 • @iamhiwelo

Slide 16

Slide 16

The languages we speak are shaping our perception of reality. Abstractions • August 2019 • @iamhiwelo

Slide 17

Slide 17

People can’t collaborate efficiently if they are not sharing a common language. Abstractions • August 2019 • @iamhiwelo

Slide 18

Slide 18

People can’t collaborate efficiently if they are not sharing a common language. reality. Abstractions • August 2019 • @iamhiwelo

Slide 19

Slide 19

It is common for growing companies to go through a storming phase where teams are isolating. Abstractions • August 2019 • @iamhiwelo

Slide 20

Slide 20

It is common for growing companies to lack alignment between product & engineering teams. Abstractions • August 2019 • @iamhiwelo

Slide 21

Slide 21

But also, our industry accepted a situation where “It is not your job” can be an answer. Abstractions • August 2019 • @iamhiwelo

Slide 22

Slide 22

Design vs. Engineering Is there really a winner? Abstractions • August 2019 • @iamhiwelo

Slide 23

Slide 23

Abstractions • August 2019 • @iamhiwelo

Slide 24

Slide 24

How do we define what is our job?

Slide 25

Slide 25

Should designers code? Should engineers design? Abstractions • August 2019 • @iamhiwelo

Slide 26

Slide 26

Stop. Abstractions • August 2019 • @iamhiwelo

Slide 27

Slide 27

Should designers code? Should engineers design? Who cares? Abstractions • August 2019 • @iamhiwelo

Slide 28

Slide 28

Engineers are not defined by their code. Designers are not defined by their sketches. Abstractions • August 2019 • @iamhiwelo

Slide 29

Slide 29

Our job is to deliver value to our customers. Our job is to protect our users and their data. And if this is done, to make our products successful. Abstractions • August 2019 • @iamhiwelo

Slide 30

Slide 30

Eh! It was a talk about accessibility, right?.

Slide 31

Slide 31

Do you think accessibility is important? Abstractions • August 2019 • @iamhiwelo

Slide 32

Slide 32

Yes. Abstractions • August 2019 • @iamhiwelo

Slide 33

Slide 33

Let’s be clear, the only possible answer is yes. Abstractions • August 2019 • @iamhiwelo

Slide 34

Slide 34

How is it possible that so many people care about it, when most of the websites are still excluding users? Abstractions • August 2019 • @iamhiwelo

Slide 35

Slide 35

You can find all needed information online. There is courses, tutorials, articles, guides. Abstractions • August 2019 • @iamhiwelo

Slide 36

Slide 36

Being accessible is not taking more time. Fixing accessibility later on is what’s costing a lot. Abstractions • August 2019 • @iamhiwelo

Slide 37

Slide 37

But in the end, we are still not able to do even the bare minimum. Abstractions • August 2019 • @iamhiwelo

Slide 38

Slide 38

Collaboration is the key to accessible products.

Slide 39

Slide 39

A fully accessible design will exclude people if not implemented correctly. Abstractions • August 2019 • @iamhiwelo

Slide 40

Slide 40

A fully accessible interface will exclude people if not designed correctly. Abstractions • August 2019 • @iamhiwelo

Slide 41

Slide 41

Remember the thing about languages and reality? Accessibility is an answer here. Abstractions • August 2019 • @iamhiwelo

Slide 42

Slide 42

Accessibility is the common language that can help designers and engineers to work together (again). Abstractions • August 2019 • @iamhiwelo

Slide 43

Slide 43

It requires both involvement from scratch. It creates a space for people to speak together. It pushes people to take ownership & make decisions. It empowers people to share their opinions. Abstractions • August 2019 • @iamhiwelo

Slide 44

Slide 44

Let’s build a bridge.

Slide 45

Slide 45

Yay! Finally, a raccoon! Abstractions • August 2019 • @iamhiwelo

Slide 46

Slide 46

We need to start with strong foundations 1.

Slide 47

Slide 47

Accessibility needs to be part of your teams’ incentive system. Abstractions • August 2019 • @iamhiwelo

Slide 48

Slide 48

Accessibility is not an acceptance criteria. You can’t test 61 WCAG success criteria each time. Abstractions • August 2019 • @iamhiwelo

Slide 49

Slide 49

You need to find people caring or being knowledgable that can take ownership of this topic. Abstractions • August 2019 • @iamhiwelo

Slide 50

Slide 50

For that, you need a culture allowing and pushing people to take ownership of their work. Abstractions • August 2019 • @iamhiwelo

Slide 51

Slide 51

Improving accessibility is the perfect opportunity to take a step back and look at the bigger picture. Abstractions • August 2019 • @iamhiwelo

Slide 52

Slide 52

7 Identify accessibility champions in your teams 🏆 Add accessibility and inclusivity in your incentive system 9 Offer access to courses and resources for your teammates : Empower people to share their knowledge cross-team 🕹 Promote accessibility by using assistive technologies in demos 👾 Start with a quick, informal and internal audit of your products role=drinks • June 2019 • @iamhiwelo

Slide 53

Slide 53

Dear managers, the next one is just for you. 😇♥😄 Abstractions • August 2019 • @iamhiwelo

Slide 54

Slide 54

Accessibility is not an option. ? People should not fight for it. @ It’s your job to be a shield for your team members. 🛡 Abstractions • August 2019 • @iamhiwelo

Slide 55

Slide 55

Also, accessibility is a never ending effort. It needs a lot of discussions, planning & alignment. It is never done. Abstractions • August 2019 • @iamhiwelo

Slide 56

Slide 56

We will need a good tooling to help us 2.

Slide 57

Slide 57

Getting feedback is always easier when you get it from an automated tool. Abstractions • August 2019 • @iamhiwelo

Slide 58

Slide 58

Implementing a strong tooling system will help preventing any knowledge-related stress. Abstractions • August 2019 • @iamhiwelo

Slide 59

Slide 59

Automated tools are limited, they only catch 20-35% of potential issues. Abstractions • August 2019 • @iamhiwelo

Slide 60

Slide 60

But in the end, with or without tooling, the best thing to do is always to test your work. Abstractions • August 2019 • @iamhiwelo

Slide 61

Slide 61

Testing keyboard navigation and existing labels for assistive technologies should be part of a PR review. Abstractions • August 2019 • @iamhiwelo

Slide 62

Slide 62

Checklists in pull requests for the win! Abstractions • August 2019 • @iamhiwelo

Slide 63

Slide 63

Because everybody should own accessibility. Abstractions • August 2019 • @iamhiwelo

Slide 64

Slide 64

⚙ Set a series of automated tools to avoid human focus only on code 🔩 Add accessibility in your unit/functional tests (Jest DOM, Jest-aXe, etc.) 🖥 Promote the usage of browser plugins (like Accessibility Insights for Web) 🕹 Add assistive technologies in your device lab ⌨ Add keyboard navigation testing in your daily workflow ♿ Include users with impairments during user testing sessions G Empower people with checklists and guidelines role=drinks • June 2019 • @iamhiwelo

Slide 65

Slide 65

Having checklist is great. (https://accessibility.voxmedia.com/) Abstractions • August 2019 • @iamhiwelo

Slide 66

Slide 66

And, y’know, it is useful for everybody. (https://accessibility.voxmedia.com/) Abstractions • August 2019 • @iamhiwelo

Slide 67

Slide 67

You can help people with resources, warnings, etc. (https://accessibility.voxmedia.com/) Abstractions • August 2019 • @iamhiwelo

Slide 68

Slide 68

It helps ICs but it is also a great political tool. (https://accessibility.voxmedia.com/) Abstractions • August 2019 • @iamhiwelo

Slide 69

Slide 69

And it is a good start to get everybody on board. (https://accessibility.voxmedia.com/) Abstractions • August 2019 • @iamhiwelo

Slide 70

Slide 70

We will need to create alignment (a lot) 3.

Slide 71

Slide 71

How are you handing over design specifications? Abstractions • August 2019 • @iamhiwelo

Slide 72

Slide 72

Why are you handing over design specifications? Abstractions • August 2019 • @iamhiwelo

Slide 73

Slide 73

What are you handing over as design specifications? Abstractions • August 2019 • @iamhiwelo

Slide 74

Slide 74

The best handover is not having to do one. Abstractions • August 2019 • @iamhiwelo

Slide 75

Slide 75

Engineers, this is your fight: Your opinion is valuable. Abstractions • August 2019 • @iamhiwelo

Slide 76

Slide 76

Engineers, this is your fight: There is no design without implementation. Abstractions • August 2019 • @iamhiwelo

Slide 77

Slide 77

Engineers, this is your fight: You are legit. Abstractions • August 2019 • @iamhiwelo

Slide 78

Slide 78

Designers, this is also your fight: You have to care about implementation. Abstractions • August 2019 • @iamhiwelo

Slide 79

Slide 79

Designers, this is also your fight: You have to think about interactions. Abstractions • August 2019 • @iamhiwelo

Slide 80

Slide 80

🖼 Specifications can’t be limited to static designs. 💬 Labels and “invisible” texts should be discussed and defined ⚡ There is no such things as a perfect design specification K Designers’ involvement should never end L Engineers’ involvement should never wait 🔩 Tooling will not save you from failure role=drinks • June 2019 • @iamhiwelo

Slide 81

Slide 81

This should not be a handover, but a conversation starter

Slide 82

Slide 82

This should not be a handover, but a conversation starter

Slide 83

Slide 83

We will need to create availability. 4.

Slide 84

Slide 84

In the beginning, our conversations were like: “hey, I’m missing something in the ticket” Abstractions • August 2019 • @iamhiwelo

Slide 85

Slide 85

In the beginning, our retrospectives were like: “We are not getting enough information.” Abstractions • August 2019 • @iamhiwelo

Slide 86

Slide 86

In the beginning, our retrospectives were also like: “Tickets should have more info.” Abstractions • August 2019 • @iamhiwelo

Slide 87

Slide 87

The thing is: Each time we added information, the situation worsened. Abstractions • August 2019 • @iamhiwelo

Slide 88

Slide 88

So, how did we resolve it? Abstractions • August 2019 • @iamhiwelo

Slide 89

Slide 89

🗓 Engineers are involved before refinement. ⚠ Before doing any UI design, we discuss the minimum set of features to have and the main limitations to consider 🧪 We debate HTML and CSS between design and engineering 🔭 We discuss future needs to consider, even if not implemented yet P Nobody’s owning the codebase 🚀 We are making adjustment on the fly, every day. role=drinks • June 2019 • @iamhiwelo

Slide 90

Slide 90

Now, it is not a handover anymore, but a documentation of decisions

Slide 91

Slide 91

Now, it is not a handover anymore, but a documentation of decisions

Slide 92

Slide 92

Now, it is not a handover anymore, but a documentation of decisions

Slide 93

Slide 93

Which means that now, designs on Zeplin are just additional resources, not the core element of our collaboration anymore.

Slide 94

Slide 94

But this can only work if people are creating availability. Abstractions • August 2019 • @iamhiwelo

Slide 95

Slide 95

This can only work if people are discussing together. Abstractions • August 2019 • @iamhiwelo

Slide 96

Slide 96

This can only work if people value their colleagues’ knowledge. Abstractions • August 2019 • @iamhiwelo

Slide 97

Slide 97

Because in the end, who cares if I am a designer who codes or an engineer designing UIs @iamhiwelo

Slide 98

Slide 98

We are here to offer the most inclusive experience for all humans, not to fight about “who’s job is it?”. @iamhiwelo

Slide 99

Slide 99

Bedankt! + Merci beaucoup ! T Tack så mycket! R Thank you! U Tusen takk! S Vielen Dank! V @iamhiwelo

Slide 100

Slide 100

Damien Senger Queer designer who codes, specialised in accessibility. raccoon.studio • noti.st/hiwelo @iamhiwelo