Visual Design and Accessibility

Hi, everyone, my name is Sommer Panage, and I'm Engineering Manager on the Accessibility Team. I'm excited to share with you three ways in which you can make your apps more visually accessible. We will be covering Dynamic Type as well as some great improvements to Reduce Motion and an API that we brought over from Mac to iOS that we call Differentiate Without Color.

So let's get started with Dynamic Type.

Dynamic Type is a feature that allows users to customize the size of the text on their screen. Now for some users that might mean smaller text and for others that might be larger text. Now for some larger text might just be a preference, but for others large text can be the difference between being unable to use their device and being able to use it.

When you're implementing Dynamic Type for your users, I'd like to remind you of four important principles.

First, you make as much of your text dynamic as possible. If the text can grow, it should grow.

Second, use as much of the screen width as possible.

Third, don't truncate text as it grows. You'll want to display the same amount of text as your default UI.

And, finally, you should scale glyphs that appear next to text so that your UI continues to look balanced.

In iOS, there are 11 different text styles that you can use with Dynamic Type all the way from titles down the captions and footnotes.

To use Dynamic Type for your UI labels, your UI text fields, and your UI text views, you just need to use a preferred font for one of these text styles and you'll want to set the adjust font for content size categories flag to true on those views. This guarantees that your view will update whenever the user changes their font size even if your app is in the foreground.

As of iOS 11, we made it easier for you to use Dynamic Type with your custom fonts as well.

You'll want to have one font and size mapped to each of the 11 text styles that we saw previously. Here I create my own dictionary of fonts for each style.

Then I can look to see if I have a font for the given style. If I do, then I scale it as appropriate using UI font metrics, and if not, then I fall back to that preferred system font.

As I'm doing my awesome Dynamic Type work, I want to be able to see it and I can now easily preview it using the new Xcode environments overwrites pane seen here. I can just slide the Dynamic Type slider and instantly in the simulator see the results.

Next, I'd like to talk to you about reduced motion.

So, motion is often an exciting and dynamic part of iOS. We use motion in many places to create a more immersive experience for our customers.

However, for some users these effects might not be desirable. One in three people has some form of motion sensitivity. Now for most people this means riding a roller coaster or maybe reading a book in the car, but for a small subset of people that sensitivity could be triggered by even looking at a screen with motion on it.

To help iOS adapt to all customers, we already provide a reduced motion setting in our accessibility settings to disable things like weather and parallax effects in the system.

And here's the reduce motion API that you might already be familiar with. When reduced motion is on, your app should adapt its animations as well.

Now another motion effect is autoplaying video. Here we see that as we scroll through the App Store trailers for the featured games begin to play.

Now while for some this might make them want to click in and learn more about a fun looking game; for others this behavior could be a bit jarring or perhaps it could trigger some anxiety.

So that users can decide if they want to see autoplaying video, we're excited to announce a new motion setting this year for iOS 13. Settings, accessibility, motion, auto-play video previews. With this setting disabled our apps such as App Store will no longer auto-play content like trailers but rather they will require user interaction to start and stop playback. Auto-play video previews starts as enabled by default, but you can turn it off at any time. And, additionally, we've made this public API.

If is video auto-play enabled is false, you should also make sure that any videos in your apps provide a play or pause avoidance to your users. And, of course, always listen for that notification to know when you should change your behavior.

Now if your app already provides an in-app setting, you'll simply want to mirror that, mirror our global setting as your default. However, you can still use the setting in your app to allow users to customize your behavior.

Another form of motion in iOS is a transition from one screen to another. Here we see the typical sliding transition as we navigate through our settings app.

To provide even more fine-grained control over the types of motion that a customer experiences on iOS, we've introduced an additional setting when reduced motion is enabled and this is called prefer Cross-fade Transitions. As you can see, by enabling that setting, my lateral slides have become dissolved transitions in the app. Now UIKit implements these dissolved transitions for you when the setting is enabled. So as long as you're using UIKit standard navigation or modal presentation, you'll get this behavior for free.

Finally, I'd like to talk to you about Differentiate Without Color.

So colorblindness might cause numerous colors that appear different to some to appear very similar to others. For those with deuteranopia, for example, some reds and greens and yellows might all look very much the same. To see how this might impact users and how we're solving for it, I'd like to show you this little app that my colleagues and I worked on. So we all really like peanut butter, and I just added a new feature so that I can track my personal peanut butter status. I've added green circles to the peanut butters that I currently have, I've added yellow circles to the ones where I've eaten them before but I don't have them right now, and I've added red circles for the ones I haven't tried yet.

Now if my friend wants to use this app but they happen to be colorblind, this might be how it looks. As you can see, all of the circles kind of blend together.

Now, as of iOS 13, this user can go over to settings, accessibility, display in text size and turn this on -- Differentiate Without Color.

As a developer, I can just check should Differentiate, Without Color and observe the Differentiate Without Color to change notification. If the setting is true, any place in my app where I use color as the only way of conveying information, I should now add some additional indicator. For example, a shape.

So back to my peanut butter app, when I see that the user has turned on Differentiate Without Color I now replace my circles with a green check, a yellow question mark and a red X. So now even if the app appears like this, we can still discern the status of my different peanut butters. Now you might be thinking, hey, Sommer, wait a minute. The app actually just looks better this way. Why even bother with the plain circle version? And you'd be totally right. In fact, when possible, you should not rely on color alone to signal meaning. Now in the case of my peanut butter app, that's easy. I can just get rid of the circles, but it's not always that easy.

Here we see the game Causality. The game play is actually indicated by the color on the screen. Now this might not be enough information for all users and so the game creators provide a colorblind mode that you see here.

When that's enabled, the players and the targets now have symbolic flags above their heads and associated.

The game designers might not have wanted this extra symbol noise in the original design, but for some users this actually is what makes the game playable. And that's it. With that we've seen three ways that we can make our apps more visually accessible to all of our customers. We can support all text sizes with Dynamic Type, we can adapt via new motion settings for our customers that might have motion sensitivities, and we can convey information in different ways when we check Differentiate Without Color.

Thank you all so much for your time. [ Applause ]