Building a design strategy for more accessible Design Systems

A presentation at Sketch & Design - Munich by Damien Senger

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

Hej! 👋 I’m Damien.

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.

Let’s talk about crushing dreams.

Let’s talk about frustrations.

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

Design systems & accessibility: a reality check. 1.

Photo by Balázs Kétyi on Unsplash

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

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

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

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

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

Let’s do a test!

✍ 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

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

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

Accessibility is a team effort 2.

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

Sketch Munich Meetup • March 2020 • @iamhiwelo

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

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

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

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

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

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

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

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

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

So what can we do?

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

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

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

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

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

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

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

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

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

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

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

Sketch Munich Meetup • March 2020 • @iamhiwelo

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

#shareTheLove Sketch Munich Meetup • March 2020 • @iamhiwelo

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

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

⌨ 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

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

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

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

Sketch Munich Meetup • March 2020 • @iamhiwelo

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

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

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

Accessibility & documentation 4.

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

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

Let’s talk about design documentation

Sketch Munich Meetup • March 2020 • @iamhiwelo

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

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

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

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

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

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

It can be a set of technical requirements

But also some requirements regarding the user experience

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

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

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

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

Any good examples? 5.

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

Sketch Munich Meetup • March 2020 • @iamhiwelo

🎉 In conclusion…

Accessibility is as fun as frustrating. 1.

Setup an accessibility policy. 2.

Offer ways to learn more about a11y. 3.

Build a team of evangelists. 4.

Propose a documentation adapted to the product 5.

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

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

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

Damien Senger
@hiwelo

1 / 103

Buzz and feedback

Here’s what was said about this presentation on social media.

Our first virtual meetup was such a blast! 135 people from all over the world tuned in and I had to kill the channel after 5h of talking 😂. Thanks everybody for attending! @iamhiwelo @oh_krapp @Anakin33 for their talks! 👏🏻 #sketchmunich #meetup @sketch pic.twitter.com/4o7tLn8qeh
— Silvia Bormüller (@svorklab) March 26, 2020
Such a cool experience. Learned a lot from @iamhiwelo and @Anakin33.
Also great conversation after all the talks, how people cope with Corona in different cities and countries, what they are learning atm. and so on. Can‘t wait for the next one. Super cool to be part of this team https://t.co/kzHTfcMiK3
— The Mandaflorian (@oh_krapp) March 26, 2020
Was so much fun with you all @iamhiwelo @svorklab @oh_krapp
— Florian Nagel (@Anakin33) March 26, 2020