4 Tips on Accessibility for App Designers

December 22, 2020

I’ve had an interest in app accessibility for a long time and wanted to share what I’ve learned about how that applies to app design. Here, I’ll share practical tips you can immediately put to use.

I want to point out what the term “accessibility” covers then talk about how designers can help. Then we’ll cover the trickiest part of accessibility: convincing others to do something about it.

What do I mean by “accessibility?”

Some folks may think of someone with accessibility issues as being blind, deaf, or in a wheelchair. They’re not wrong. However, it’s a bigger umbrella than you’d think. Someone could have motor impairments, colorblindness, dyslexia, reduced vision, a developmental issue (just to name a few from a long list).

Microsoft has a great diagram on the types of disabilities one may have from their Inclusive Design site

Some facts about accessibility

  • In the USA, 36–54 million people have a disability (disabilitystatistics.org)
  • 15% of the world’s population have some form of disability, which includes conditions that affect seeing, hearing, motor abilities and cognitive abilities
  • About 4% of the world’s population have low vision, whereas 0.6% are blind
  • 7 to 12% of men have some form of color-vision deficiency (color blindness), and less than 1% of women do
  • Low-vision conditions increase with age, and half of people over the age of 50 have some degree of low-vision condition
  • Worldwide, the fastest-growing population is 60 years of age and older
  • Over the age of 40, it’s more common to find folks who need reading glasses or bifocals to clearly see small objects or text. That’s a condition caused by the natural aging process, called presbyopia

Ok, so what designers can do to help?

There’s a lot we can do to help here, and for brevity’s sake, we’ll focus on:

  1. Properly applied typography
  2. Adequate contrast ratios
  3. Decently-sized touch targets
  4. Considerate use of motion

Let’s start with typography.

1. Typography

How text appears is a foundational part of design. It establishes voice but does so much more. It’s easy to get carried away with aesthetics when we’re designing but we can’t forget about the point of typography: to make something both legible and readable.

The first consideration is to have properly-sized fonts. For iOS, Apple sets 17pts as its default body size (Apple uses pts for sizing because of display density—for the sake of our discussion, consider “pts,” “dps” and “pixels” as the same thing). That’s a solid starting point. I usually prefer to work in units of 3 so I start with 18pts and move around from there, that’s easier for my brain to work with.

The kind of typeface you choose is also important — find a workhorse typeface like Proxima Nova or Meta Serif to handle most of the text for you. You can still get fancy with your headlines, just choose something that’s going to make for easy reading when it comes to your body text.

What about people with dyslexia? Consider adding a typeface that supports them like Dyslexie.

If you’re working on an iOS app, Dynamic Type is your friend. We’ve had similar things on the web for a long time but it’s only recently that apps got in on the fun. Essentially, Dynamic Type is like CSS but for apps: it’ll help you scale text up or down accordingly depending on the person’s system-wide settings.

Android has something similar to Dynamic Type. It allows someone to set a default font size, it’s up to apps to honor it.

There’s a lot more to cover with typography than I could discuss here. If you’re interested, here’s a more in-depth piece on typography.

2. Contrast ratios

You may have heard of the WCAG or someone talking about “level AA” or “level AAA” when it comes to contrast. What we want to do here is make sure everyone can see what we’ve designed.

This affects everything from text to icons to buttons.

For any text or icons, make sure everything’s large enough and you’ve met a sufficient contrast ratio between the element and its background. The same goes for buttons.

Be careful when using color too. You don’t want folks to miss important parts of your interface. So take it easy on those shades of grey.

If you’re trying to make everything accessible, you may find that your color palette feels flat. Here’s a fun tip I’ve used: try to combine accessible colors into a gradient. It’ll make your design feel a lot more interesting.

If you’re in Sketch, you can make it easy on yourself by checking out Stark or Color Contrast Analyzer. Both will tell you what contrast ratio you’re at without you having to do any math.

3. Touch targets

This covers everything from links to buttons. This one is mercifully simple, thanks to Apple’s Human Interface Guidelines.

First, make sure your buttons have at least a 44px square tappable area. They don’t have to look 44px tall, you can put invisible space around them. The goal is to ensure fingers have enough area to tap your button.

Secondly, make sure there’s enough spacing between touch targets. A 44pt button right on top of another is just as bad as a button that’s too small. I generally try for about 24–36px of space between any touch targets. Material recommends slightly larger touch targets.

Android designers may also be wondering about this, Google recommends a touch target size of 48x48.

4. Animation

There are two things to cover here: motion and flashing colors.

Some folks get motion sickness, so offering a low-animation setting can help alleviate that sick feeling. Doing this can mean the difference between someone who stays and someone who bails on an app.

Years ago after iOS 7’s beta, people reported having motion sickness from all the visual effects. In response, Apple released a low animation setting to address that problem.

Finally, for people with a history of epilepsy: we need to avoid flashing the screen or big color changes more than twice a second. Anything faster than that is a trigger.

That’s cool, but how do I convince others?

Lately, the folks I’ve been helping have seen the value in designing for accessibility — it’s really inspiring. That’s not always been the case and I’ve had to convince people why accessibility should be more than a “nice to have.” It isn’t the easiest discussion, but these strategies can be helpful.

I believe that building accessibility into your product is more than just a nice thing to do, it’s the right thing to do. It’s easy to agree with that idea but tricky to put into practice. Here are two other convincing reasons why you should take accessibility seriously.

Clients leave money on the table

By only designing for the majority, you’re leaving customers who want to give you money out in the cold.

Think back to this statistic I mentioned before: if there are between 45 and 60 million people in the USA with a disability, that’s about 15% of the population. If we assumed that number scaled proportionally to your client’s business, it could be 15% more people to reach.

Clients leave themselves open to lawsuits

Responsible designers do what they can to keep their clients from doing something that’s not in their best interest.

Clients who disregard ADA compliance can be (and have been successfully) sued. This is especially true for companies who have a connection to a physical location. Target is a cautionary tale here.

Consider this from the LA Times:

Nearly 5,000 ADA lawsuits were filed in federal court for alleged website violations in the first six months of 2018, according to an analysis by Seyfarth Shaw, a law firm that specializes in defending such cases. The firm predicted that the number of lawsuits will climb to nearly 10,000 by the end of the year, a 30% increase from 2017.

Clearly, this is serious. Let’s make sure this issues doesn’t go unremarked with your team.

In closing

Accessibility is a huge space and I’m still learning about it. There’s a lot designers can do to help, including things I didn’t mention here like ensuring you have proper alt text and captioning for videos. But we did discuss some practical things ranging from how we treat typography, contrast, touch target size, and animation.

I hope after reading this that it’s a little easier for you to convince your boss or client that this is important. No one wants to leave money on the table, nor do they want to open themselves up to litigation.

Lastly, I’m constantly exploring this space and learning a lot by the day. I by no means am trying to convey I know it all. If you have something that will help inform me, send it along!