Controlling VoiceOver

If you are testing the navigation of your app with VoiceOver, but you are not interested in what VoiceOver says for the moment – maybe you are just looking at how the focus behaves when navigating your app – or you are surrounded by more people in the office and don’t have your headphones with you, you can use VoiceOver without voice. A double tap with three fingers will mute/bring back VoiceOver’s voice.

On the other hand, if you are demoing something but you need to speak or someone comes to speak to you while using VoiceOver, you can pause/resume VoiceOver with a single tap with two fingers.

Screen curtain

In Chapter 1 we asked you: could you use your app with your eyes closed? It is now time to prove it. There is a way of using VoiceOver with the screen of your device off. It is enabled/disabled by a triple tap with three fingers.

It is the fairest way of testing VoiceOver and it will help you empathize more with your users. If you can make it through the main flows of your app easily, that would be an excellent sign. On the other hand, it will give you, as we mentioned, another perspective of your app. If you find it difficult to use, it might be because of one of the following two issues: VoiceOver is poorly supported, or simply the UX of your app might not be great and you should revisit that. If it takes effort to navigate the app with VoiceOver, it probably takes effort visually too and you may need to clean the interface up a bit, remove some clutter, add some headings, or better structure your content… Or if something sounds in the wrong order when navigating with VoiceOver, it might be because that UI component is not visually in the right place either.

Accessibility should be embedded in the team’s culture and processes, but, as with any other software development process, the QA step might be the last chance to find any issues before it gets shipped to your users. So please, remember to use some of these techniques or tools to make sure your new feature is accessible before moving that ticket to done. And actually, if your team has a definition of done for a task in development, it would be an excellent idea to add “Accessible” as one of the requisites.

Shortcuts

Having Accessibility Shortcut enabled in your testing devices is a great way for having a quick access to the options you use the most. For a quick refresher on how to enable those both from your home/side button and in Control Center, you can go to the second chapter.

Accessibility Inspector and Environment Overrides

Before releasing an app or a new update, it is a good idea to test the final result in real devices for testing a closer experience to the one the final user will get. But while developing, it is sometimes just more convenient to use the simulator. There is a really useful tool embedded in Xcode that for some reason most people don’t know about, the Accessibility Inspector. To open it, go to Xcode’s top menu, and then Open Developer Tool, where you’ll find very valuable tools like Instruments and, of course, the Accessibility Inspector (Figure 7-1).

Accessibility Inspector

The Accessibility Inspector makes it easy to test and find accessibility issues in your app. There are three main sections: one that will help you inspect the app, another one that will run an accessibility audit in the current screen of the app, and another one that will let you simulate different settings in your device.

Inspect : When inspecting your app, you can have a quick look at how the main accessibility properties are configured in your UI components, including the label, value, traits, or identifier.

New with Xcode 11, Apple has introduced a new feature for testing VoiceOver that comes very handy. If you click the icon with the speaker, you will be able to hear how VoiceOver would vocalize your app, you can go to the next and previous elements, or you can just click play and it will automatically start reading all the elements in your screen.

Audit: To run the accessibility audit in your app, just switch to the warning icon in the inspector, navigate in the simulator to the screen you’ll like to audit, and click “Run Audit”. When doing that, you’ll get a list of potential issues. It even highlights where the potential issue is in the screen, and, if you click the little help icon, it will even hint a suggestion on how to fix it (Figure 7-2).

The audit will help you catch a series of accessibility issues, including small-hit areas, non-accessible elements, text that does not support Dynamic Type, contrast ratio issues, images that contain the file name as its accessibility label, etc.

If you are starting to make your app more accessible, running one of these audits in your app is a great way of breaking the ice and starting to fix any issues it may have.

When dealing with contrast ratios, there is a hidden tool called “Color Contrast Calculator” (Figure 7-3) in the Accessibility Inspector in Window, in the top menu, which can be very useful too.

For small-hit areas, make any tap targets at least 44pt x 44pt. Anything smaller than that will be just too small. You’ll find users trying to action the button and failing most of the times. Does it sound familiar? Not a great experience, it is really frustrating! And it can make the app very difficult to use by people with tremors, shaking of the hands, or any other motor impairment, and also for users with low vision.

Settings: You’ll find a few accessibility settings you can simulate in your iOS simulator, including Increase Contrast, Reduce Transparency, and Reduce Motion. Invert Colors will invert the colors of any images in your app, so you can see if they would be inverted or not when using Smart Invert Colors. But the tool in this section I find more useful by far is the possibility to tweak the font size and to see how the app reacts to those changes.

However, it may now exist a more convenient way to access some of these settings when testing your app. New in Xcode 11, you can use Environment Overrides.

Environment Overrides

Environment Overrides is new to Xcode 11 (Figure 7-4). When running your app in the simulator, you’ll find a new option next to the Debug Memory Graph and the Debug View Hierarchy options. In this version, it has three sections. The first one allows you to see how your app would look in the new Dark Mode introduced in iOS 13. The second one, Text, will allow you to change the text size, the same way you could do with the Accessibility Inspector. The third one is all about Accessibility. You’ll find some of the same options you can use in the Inspector too, like Increase Contrast, Reduce Motion, or Reduce Transparency, but also new ones like Bold Text, On/Off Labels, Button Shapes, or Grayscale, and a new accessibility setting introduced in iOS 13, Differentiate Without Color. Smart Invert will work as it does in your device instead of just inverting the images, which is what you get with the Accessibility Inspector at the moment.

Switch control

There are plenty of ways for testing Switch Control. The easiest one might be by connecting a Bluetooth keyboard to your device. Under the Accessibility settings, you can enable Switch Control and also select how many switches you want and what each of those does. For example, you could configure just one switch and map it to the space bar of the keyboard to select an item. This would let Switch Control scan the screen, and you could press the space bar when you wanted to select the highlighted element. But you can also have two switches: one that moves to the next item and another one to select it, for example.

But Apple has made things even easier for you to test. If you don’t have an external Bluetooth keyboard, you can also configure switches that get triggered at the movement of your head. For example, a Right Head Movement can be used to select an item and even touches on the screen. However, this one will disable any other touches on the screen, so you may want to have an alternative switch and Accessibility Shortcut for an easy way to enable/disable Switch Control.

Have a quick browse to the settings menu; the possibilities for configuring and tweaking Switch Control are endless.

Summary

Now we know a few ways to identify accessibility issues and check if our fixes work properly. It is time to try to find time to improve the accessibility of your apps by embedding accessibility in the day-to-day process of your team and company.