How to make apps more accessible

Recorded May 31st 2020 – watch the full episode on YouTube.

What can designers do to create more accessible apps, and make accessibility a core feature of their designs?

Meng To: I think this speaks to both designers and developers. One thing that I think a lot of designers can use knowledge is how Dynamic Type works and how they can use stacks to make it super easy to just set some sort of a balance for their text and regardless of the size of the text, it's still going to look great.

“Accessibility is super important to Apple, very important to iOS, which means that you have to understand that your layout has to be transformable.”

And as we all know, accessibility is super important to Apple, very important to iOS, which means that you have to understand that your layout has to be transformable. It has to welcome all different sizes of icons, of text especially and I guess that's also why I believe that Apple brought to us SF symbols, which is a font icons.

So that we can easily just change the font size based on the accessibility option, and it's just going to increase the icons as well. I think that's just beautiful, so that gives us a glimpse of the future of design. So designers need to learn those things, for sure.

Paul Hudson: Certainly Dynamic Type support, because it is baked in the SwiftUI by default. You haven't got to opt into it like you did with UIKit – it’s the default in SwiftUI. That should be the absolute bare minimum folk support, I'd like to hope.

You can go into Settings and accessibility and drag the font slider all the way to the right with extra mode, and it becomes very, very large. You haven't got to necessarily support every possible size – Apple don’t. For example, their navigation bars don't get bigger and bigger and bigger, until they have one word per line. They max out at a certain size and they cap it.

But then they start introducing other affordances. For example, if you long press a tab bar icon because you want to read what it's saying, you'll get a zoomed-up icon taking up the full screen to show you what it is. They don't just make the tab bar icons bigger and bigger and bigger because it would make the design unusable.

So put some thought into it, designers and developers. Dynamic Type at the very least but also labels and hints and more to really help folks use your UI.

“So put some thought into it, designers and developers. Dynamic Type at the very least but also labels and hints and more to really help folks use your UI.”

And in fact, I've been thinking recently it'd be a really good job interview question: here is an iPhone with VoiceOver enabled, please navigate to Settings and turn it off. That's it. Really simple, because you can tell immediately the folks who've never even bothered trying VoiceOver for their apps because they can't navigate around the system properly – they don't know how to do it because it won't respond to regular taps. So it's a simple way of filtering out folks who've never even bothered to try the absolute basics of accessible design.

Paul Hudson: How can designers or developers who want to improve their design skills build good designs while also really keeping it truly accessible to everyone regardless of their access needs?

Meng To: We've discussed about Dynamic Type, and I think that's extremely important. We’ve discussed about color contrast – let's say you have a white background with black text on top of it, use that all the time. If you're not sure about what colors to use, just use black and white. That's it. For the button, just use blue. If you're not sure what to you use, just use blue.

Apple has a very specific way that they're using colors to make the buttons. So the button color is actually a branding of the app. If you look at the news app is kind of red. If you look at most apps it's blu, but each app can have their own color.

The other thing I would say is that, at the end of the day, design is a lot about real life, and especially when it comes to animation.

“So it's very, very important that you make your design contextual adapted to whatever needs of your users. And when it comes to animation to use that transition to have a context from one screen to another, which is why I love all of these interactions that you find on iOS.”

What we cannot rely on the old paradigms of the web. When you visit the website, you go to another page – takes two seconds to refresh, and you're completely out of context from before. And as Dieter Rams says, one of the cardinal sin of design is to not care about the context. So it's very, very important that you make your design contextually adapted to whatever needs of your users.

And when it comes to animation to use that transition to have a context from one screen to another, which is why I love all of these interactions that you find on iOS. It feels like they have embedded this principle very deeply and swipe, when you move back from another screen, or even when you get out of your app, it transitioned back into the home icons.

“You don't need to afford every single aspect of accessibility, but if you can, at least, take care of the most important ones, such as Dynamic Type, do that at first.”

It's just beautiful. It's all seamless. You go to a group, it opens and it blurs everything. And then you have the views on top. All of this is like walking from one room to another and it's very transitional. They they have perfected their motion. At the beginning, there were a lot of complaints about motion sickness. I'm hearing a lot less of that. So there's definitely a bit of a tweak over time, but also they have perfected the way that you can turn off some animations for the motion sickness.

At the end of the day, it depends on which stage that you are in your design, which stage that you are in your launch. You don't need to afford every single aspect of accessibility, but if you can, at least, take care of the most important ones, such as Dynamic Type – do that first. And if you see you starting to get a lot of users complaining about motion sickness, sure. Let's add an option to turn off animation, or let's remove the animations that are too intrusive, which should never happen there in the first place anyways. And, yeah. Those are some of the things that I would look into.

Paul Hudson: Certainly Apple's video from WWDC18 about designing fluid interfaces was a real eyeopener because they'd worked on the whole gesture based UI for a very, very long time. It wasn't just an off the cuff kind of choice.

And that gave them a lot of time to try things out, realize that doesn't work. Throw that away. Try something else. That didn't work right away. And there was advice in there about making really nice interruptible animations – it’s amazing because it doesn't take a lot of work to do in SwiftUI. It's just baked into it by default. And so you can get interruptibility out of the box.

You can have very, very fine-grained controls over exactly how your app should work. And really there's no excuse not to use these because it often is one modifier or two modifiers, or maybe a maximum of three modifiers to get exactly what you want and have that control.

Sponsor Hacking with Swift and reach the world's largest Swift community!