Introducing Appibilities: How Marianka Cilliers of Glucode is helping make apps more accessible

What’s the use of a beautiful design if some people simply can’t use it? Accessibility has been a key topic in the past few years when it comes to UI/UX design. For Marianka Cilliers, UI/UX design lead at Glucode, this struggle is both a personal and professional matter. We sat down with her to talk about accessibility in design and why they created Appibilities, a new accessibility Assistant for Sketch.

Tell us a bit about yourself and Glucode’s journey so far.

I have been in the South African design industry for the past 12 years and at Glucode since 2016. I’m an advocate for Sketch as well as accessibility and inclusive design.

Glucode entered the app space in 2009 with the launch of Creamer Media’s Mining Weekly iPhone app. It was the first South African developed app available in the App Store and is currently a highly rated and trusted news source for the international mining industry. We continued to create globally competitive apps across various sectors like finance, insurance, health, transport, and entertainment. Most recently we’ve worked on Appibilities, an iOS accessibility Assistant for Sketch.

Why do you think accessibility in mobile apps is important?

Well, we build ramps to make buildings more accessible, but we don’t always think about making our apps accessible. Think about how easy it is to pick up your device and order a meal, or make an appointment and submit a medical claim. Now imagine a user not being able to read text on-screen because the contrast ratio is not WCAG (Web Content Accessibility Guidelines) compliant. Or the buttons make it hard for an individual with mobility impairments to tap, for example.

Your design is there to solve a user problem, and by not factoring in accessibility you are potentially missing the mark.

Your design is there to solve a user problem, and by not factoring in accessibility you are potentially missing the mark — because the problem is only being solved for a part of your audience.

How has your approach to accessibility changed over time?

I first opened my eyes to accessible design during a UI conference in 2017. What stood out to me was how there are products — especially apps — that aren’t accessible to all groups of people. Over the years I’ve been invested in watching WWDC sessions and attending conferences on the topic.

I find it incredibly insightful how accessible design has expanded into Inclusive design as well since it’s not just about making things that are accessible for people with impairments, but for everyone. For example, raised shapes on hair products to enable the visually impaired to distinguish between assorted products — but by using shapes instead of braille, it becomes universally accessible for others as well.

What’s your personal investment in accessibility?

My older brother has always struggled with his eyesight from an early age. A couple of years ago he was diagnosed with Glaucoma — a condition where pressure build-up in your eyes can damage the nerves which send images to your brain. This can lead to vision loss and blindness, should the condition worsen. I started noticing how he struggles to use apps on his phone.

I decided that I was going to spend the rest of my life working towards design that is accessible and inclusive, to make things easier for my brother — and for everyone else.

Thankfully, iOS’s accessibility features enable him to increase his font size, boldness and contrast — but there are several apps that do not cater to native accessibility, and that makes it hard for him. I decided that I was going to spend the rest of my life working towards design that is accessible and inclusive, to make things easier for my brother — and for everyone else.

What are some common failings you notice with apps and companies tackling accessibility?

Common failings I notice constantly include custom text that doesn’t include accessible labels to scale up dynamically, contrast ratio that is too low and tappable areas that are too small. Another common failing is component naming that doesn’t accurately describe the functionality — this specifically affects users who use VoiceOver to read out elements on-screen.

How can designers improve these failings?

For text issues, you can use native fonts and default text sizes to enable dynamically text scaling when users enable accessibility in their system settings. You can also use Sketch plugins like Cluse and Stark to check the contrast ratio of your text on different backgrounds — a good ratio to strive for here is 4.5:1.

The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. 20/40 is commonly reported as typical visual acuity of elders at roughly age 80.

Another way you can improve visual accessibility is through your designs’ color combinations. This can be achieved by simulating various forms of color blindness to ensure that users would be able to differentiate between different states. Another method you can use is Iconography — in order to enhance meaning in these instances.

In iOS, ensure that your tap states are at least 44px to aid users with mobility impairments.

You should also add alt text to imagery, make sure that components are in the correct order, and ensure text labels accurately describe the functionality of components for users who make use of VoiceOver to read out on-screen elements.

What do you focus on with Appibilities to increase accessibility?

Appibilities will aid in improving accessibility by checking and advising you on using native fonts and weights. San Francisco and New York fonts have specific rules when used in designs. To help you, you’ll get an alert when they’re being used incorrectly.

Another aspect Appibilities will help you with is sometimes an Artboard gets mistakenly resized during the design process. Appibilities will help you keep your Artboards in check, by ensuring you stick to native iOS device sizes.

Incomplete sentences are another area of frustration that we aim to tackle. Appibilities will alert you to the use of ellipses — and help you to make sure that users always have a way to access information that doesn’t quite fit the screen.

By using native styling, accessible colors and giving designs space to breathe, your app can be both beautiful and accessible.

Last, but not least, small tap areas are frustrating for people using your app. Appibilities will guide you in making sure that all interaction points have a minimum tappable area of 44x44pts.

We hope to expand on Appibilities to check against more iOS accessibility guidelines, but we hope this is a step towards design that can make a difference and improve people’s lives. We’re also hoping to expand Appibilities to a material accessible assistant as well.

What do you see in the future of accessibility?

Equal focus on visual aesthetic and design that is accessible and inclusive. By using native styling, accessible colors and giving designs space to breathe, your app can be both beautiful and accessible.

We’re always on the lookout for designers pushing the boundaries of what is possible in Sketch. Have you created something awesome in Sketch? Share it with us by using #MadeWithSketch and we might feature you in our next featured post.