A presentation at Abstractions II in in Pittsburgh, PA, USA by Damien Senger
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
Web Accessibility is a team effort, but too often it is just viewed as a technical requirement relying only on the engineering team.
Unfortunately, you cannot deliver an accessible experience if the design and the project itself was not prepared for it.
In my last projects, I tried to use Web accessibility as a bridge between design & development and it worked.
New workflows, new deliverables, new rituals: focusing on making an accessible platform allowed my teams to abolish every wall between each specialties.
Let’s discuss together how we were able to do it and how we documented accessibility and shared accountability between PO, designers and engineers.
Here’s what was said about this presentation on social media.
for free. You
can too.