Using accessibility as a bridge between design & development

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

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.

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? 🦝 ⏳

A bit of background first

💾 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

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

/ 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

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

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

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

Design & Engineering: how is it going?

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

Abstractions • August 2019 • @iamhiwelo

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

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

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

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

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

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

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

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

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

Abstractions • August 2019 • @iamhiwelo

How do we define what is our job?

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

Stop. Abstractions • August 2019 • @iamhiwelo

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

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

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

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

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

Yes. Abstractions • August 2019 • @iamhiwelo

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

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

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

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

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

Collaboration is the key to accessible products.

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

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

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

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

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

Let’s build a bridge.

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

We need to start with strong foundations 1.

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

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

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

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

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

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

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

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

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

We will need a good tooling to help us 2.

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

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

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

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

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

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

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

⚙ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

🖼 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

This should not be a handover, but a conversation starter

This should not be a handover, but a conversation starter

We will need to create availability. 4.

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

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

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

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

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

🗓 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

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

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

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

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

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

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

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

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

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

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

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