Accessible design: in conversation with Cluse developer Yana Gevorgyan

To celebrate Global Accessibility Awareness Day, we wanted to share the amazing work of just one of our plugin developers — and show how small accessibility changes can have a big impact for millions of users.

Sketch wouldn’t be the platform it is today without our incredible community of plugin developers. The tools they create make it easier to design incredible products. And when it comes to making your designs accessible, our community of plugin developers have built some great tools to help. One of those is Cluse.

Yana Gevorgyan, a recent product design graduate from MICA, noticed that accessibility isn’t always an organic part of a designer’s workflow. So she created Cluse — a unique color contrast plugin that ensures your designs are WCAG 2.0 accessible.

We caught up with Yana to get her thoughts on accessibility in design, and to find out more about Cluse’s brilliantly simple (and simply brilliant) slider system.

What inspired you to create Cluse?

I created Cluse only a few months ago as a capstone project to receive my Bachelor’s Degree in May of 2020. The idea was sparked by observation of my peers and colleagues.

During my last internship, the team spent a lot of time copying and pasting hex values from Sketch to online contrast checkers. This time adds up fast if you are working with multiple products every day, which means some teams skip out on checking for color contrast or accessible font styles. I conceived Cluse to weave accessibility into the current workflow of designers, making inclusive design more convenient and, as a result, more widespread.

“The majority of the world population is connected to the internet and depends on it for everyday tasks. Among them are people with varied backgrounds, ages and physical abilities. And while not all physical spaces are accessible to people with disabilities, there is no reason that websites should be the same way.”

What was the process like for designing and developing the plugin?

When first considering the idea of Cluse, I observed designers’ current accessibility workflow. After user studies, I concluded that most designers minimized Sketch and went to online contrast checking tools for guidance. There was a strong preference towards contrast checkers which used sliders to adjust hex values until they passed WCAG. My path was clear: integrate designers’ favorite accessibility tool into their favorite prototyping tool. I wanted to ensure the designers did not need to leave Sketch in order to design for accessibility.

In my design process, I’m a functionalist: form follows function. Peripherals like plugins must build on the user experience of the product they are supplementing. The user expects familiar patterns in both interaction and visuals. As a result, the visual design of Cluse’s UI closely mimics the Inspector. I actually created a fake style guide for the Sketch Mac app specifically to ensure relative smoothness and accuracy in my integration. If you’re interested, you can read more about Cluse’s visual design process on my website.

As for the development process, the Sketch API documentation was a good start, but my best guide for more complicated integration with native macOS APIs came from the design community. I owe a debt of gratitude to Matt Curtis’ tutorial on building Sketch plugins with HTML, CSS and Javascript. He writes with such succinctness and clarity that even a newbie coder can follow along and contribute to Sketch’s ever-growing plugin repository.

“I think a lot about designing with empathy. Don’t think of your audience as users. First and foremost, they’re people.”

What sets Cluse apart from other accessibility plugins for Sketch?

There are many contrast checker plugins for Sketch out there, which makes me happy. The concept is simple: you select two layers, run the plugin and get a WCAG compliance rating. But more often than not, the user journey stops there — without any context or calls to action. You don’t know why you got that failing WCAG rating nor how you can fix it. Cluse is the only contrast checker that actually allows you to do something about failing hex values without switching apps. Thanks to the foreground and background lightness sliders, designers can adjust their color contrast live and design for accessibility faster than ever.

Why is accessibility so important in design?

It’s our moral responsibility as designers to create products that everyone can use, not just a subset of people. We use technology more and more in our lives — especially during the COVID-19 pandemic, when more tasks have migrated from the physical to the virtual plane. The majority of the world population is connected to the internet and depends on it for everyday tasks. Among them are people with varied backgrounds, ages and physical abilities. And while not all physical spaces are accessible to people with disabilities, there is no reason that websites should be the same way. Designers can empower their users, and all it costs is a few adjusted hex values. I call that a bargain.

“Designers can empower their users, and all it costs is a few adjusted hex values. I call that a bargain.”

How does Sketch help you (and others) design more accessible products?

The path to accessibility begins in the designer’s Sketch document. Most people tend to believe that accessibility is the sole responsibility of developers. After all, they are the ones implementing screen reader capabilities and conducting QA tests. But that idea is misguided. If the design is not accessible from the beginning, the developer can’t fix that. Sketch is the first line of defense against poor contrast, insufficient differentiation between hover states and non-descriptive link text. Before handing-off to developers, look at your artboards and style guides, and conduct an accessibility evaluation. With a plugin like Cluse, you can ensure that your design is accessible within seconds.

When it comes to designing something and making it accessible, what’s your approach?

I think a lot about designing with empathy. Don’t think of your audience as users. First and foremost, they’re people. Once in a while, take a step back from your role as the designer and put yourself in their shoes. Better yet, talk to anyone you know who might be visually impaired. Sit them down next to you and do a cognitive walkthrough of the design. At one of my internships, we had a software engineer who was red-green color blind. He was the most invaluable accessibility resource our team has had.

How can designers rethink their approach from the start to make their designs more accessible?

Designers must realize that accessibility isn’t just for people with permanent visual impairment. That color contrast you adjusted? It helped a person more easily navigate your website in low lighting. That distracting element you omitted? You just improved the browsing experience for people who have ADHD. An even larger percentage of your user-base can face temporary and situational disabilities, such as browsing with low brightness outside or having a broken arm. It might help designers to frame this awareness not as accessibility, but inclusivity. Anything that makes the product more usable for your edge cases ultimately benefits everyone.

“Once accessibility is your new normal, you no longer feel restricted by it. It becomes the natural approach to design, opening the door to creativity.”

If they can’t tick every AAA box, what are the things designers should focus on to make their work accessible?

Making inclusive designs does not have to be difficult or time-consuming. If you can’t meet every accessibility metric, focus on color contrast. It’s the minimum amount of effort for the maximum amount of impact. The difference between AA and AAA can be only a few hex values away.

Do you think designing for accessibility can limit your creativity?

The notion that designing for accessibility restricts creativity is a false dilemma. Restrictive design and visual innovation are by no means opposite. In fact, historically, creative limitation has been the greatest impetus for human ingenuity. Constraints foster experimentation. And once accessibility is your new normal, you no longer feel restricted by it. It becomes the natural approach to design, opening the door to creativity.

In terms of accessibility in the design sector, what would you like to see in the future?

As strange as it sounds, I want the need for products like Cluse to diminish. I aim for inclusive design to be so ingrained our tools and workflow, that there is no need for third-party accessibility plugins.

As part of the project, Yana designed some stickers for an exhibition of her work — and we have five sets to give away! We’ll even throw in some of our own stickers to sweeten the deal. To be in with a chance of winning, simply send us a Tweet with an example of accessible design done well by 21 June. We’ll announce the lucky winners on 22 June. 😎