Auditing Your App for Accessibility

Adding accessibility to your app may be an intimidating task, but there are some handy tools out there to get you started quickly. There are a variety of ways to approach your accessibility implementation, but the first step is to perform an audit on your app. By auditing your app, you can identify all of the improvement areas and outline the items needed to make your app fully accessible.

When it comes to auditing your app, there are a variety of tools and methods available to help. Generally, you’ll want to spend time getting familiar with accessibility features and navigating through your app as one of your users. Xcode also provides the Accessibility Inspector, which is a handy way to see what accessibility settings might be missing on User Interface (UI) elements.

Manually Auditing

It’s best to explore the different accessibility options on your iOS device before anything else. Getting familiar with how users navigate apps using assistive technologies is essential to understanding where you should improve your app.

VoiceOver

When thinking about accessibility, the first thing that comes to mind is VoiceOver. iOS does a decent job at making labels, buttons, and sometimes images accessible by default, but there is still room for improvement. To tell how accessible your app truly is, enable VoiceOver on your device and run through it as a user. It’s important to both note which elements are focusable (they’ll appear with a box around them when focused and be read aloud) and the overall flow of the focus. To get a full example of using the app as a user, it’s helpful to enable the screen curtain feature which will black out your screen while allowing you to use VoiceOver gestures. Once you have VoiceOver on, the easiest way to toggle screen-curtain is by using the three-finger triple-tap gesture.

Try experimenting with different VoiceOver rotor options to see how elements are focused. If you’re unfamiliar with the rotor, “Getting Familiar with iOS VoiceOver’s Rotor” will get you started.

Display & Text Size

VoiceOver isn’t the only accessibility feature you should explore. “Display & Text Size” is another prominent feature and might be even more widely used than VoiceOver. Some users may be able to see but have a difficult time with small fonts on their devices. In the iOS Accessibility settings, there is an option to increase text size significantly. However, UILabels do not handle this out of the box. To test different font sizes:

1. Navigate to Settings
2. Select “Display & Text Size”
3. Select “Larger Text”

Here you can change the text size with the slider at the bottom of the screen. To use even larger sizes, enable the “Larger Accessibility Sizes” toggle. Now the slider should show an even larger range of sizes.

Returning to your app, take note of which labels, if any, respond to this setting. It’s important to take note if text gets cut off, truncated, or appears incorrectly. Buttons should also scale and increase their text size per the settings. It may be an edge case, but be sure to check the largest size together with the “Bold Text” option (also on the “Display & Text Size” screen) to account for the largest option. Making your app look good and function at the largest size is a great way to ensure all sizes in between will likely work.

Tip: Try using “Smart Invert” to find items that aren’t inverting but should and vice-versa. The more you track down and fix, the more useful your app will be for accessibility users!

Voice Control

Voice Control is a handy feature that can also aid you in assessing accessibility. It assumes that users have sight and voice and can use their voice to navigate their device using commands like “Swipe left,” “Tap,” etc. There’s also an “Overlay” option where you can enable “Item Names” which provides a nice at-a-glance view of what accessibility sees.

Using Accessibility Inspector

Manually testing your app to see what is accessible is essential, but there are also tools available that can speed up your assessment by identifying the low-hanging fruit. The Accessibility Inspector can help you step through your app and scan all of the accessibility settings on UI elements for issues to fix. You can find the Accessibility Inspector in Developer Tools:

1. Open the “Xcode” menu in the menu bar
2. Select “Open Developer Tool”
3. Select “Accessibility Inspector”

In order to use the Accessibility Inspector to check your app, you’ll have to connect your device to your MacBook or launch your app in a simulator. Once it’s connected, it will show as an option in the device dropdown.

Once you’ve chosen the device or simulator, the Accessibility Inspector will show all of the basic settings, actions, element details, and UI element hierarchy. For the purposes of accessibility, we’re going to focus on the “Basic” section. In there, you can see the values set for the accessibilityLabel, accessibilityValue, accessibilityTraits, and the accessibilityIdentifier. By pressing the “Audio” button, you can also hear the label read aloud. Keep in mind that this isn’t always exactly what VoiceOver speaks on a device! For one thing, it does not voice or show the accessibilityHint.

There are multiple options available for navigating through the focusable elements in your app:

• Enable the Inspection Pointer which allows you to hover over simulator elements.
• Use the Next/Previous element buttons to manually move through elements in focus order.
• Press the Play button to automatically move through elements as VoiceOver finishes voicing each one.
•  You also have the option to navigate through the elements without any audio by toggling the audio button off.

By going through your app with the Accessibility Inspector, you can verify accessibility settings and perform a more in-depth audit of what is missing.

Inspector Audit

Last but not least, the Accessibility Inspector also has an audit feature! This goes through all of the UI elements on the screen and lets you know which ones may be inaccessible with VoiceOver. It also lets you know which elements don’t support Dynamic Text.

Simply switching to the audit screen and pressing “Run Audit” gives you a list of issues to fix. Above, you can see that the screen audited is missing accessibility settings on multiple UI elements, and its labels don’t allow dynamic sizing. The eye button next to each item will show you which UI element the warning is referring to. There is also a button with a question mark in a circle next to that which provides suggestions on how to fix the issue.

Fixing all of these warnings is a great start to making your app more accessible! As you fix issues, you can re-run the audit periodically to check what is left to fix. These tools are a great starting point, but it’s critical to also manually test your app as a user to verify things work as expected when using accessibility options.

Inspector Settings

You might have noticed that there’s a settings button available in the Accessibility Inspector as well. These settings allow you to make real-time adjustments to your app to test accessibility. For example, if you enable Dynamic Text on a label, using the font size slider will change the size of text on the simulator immediately.

Conclusion

Making your app accessible isn’t as daunting as it seems. With all of the tools available and some time to audit your app, you can identify significant usability improvements. Implementing these improvements is a huge win for your users and makes your app more user-friendly for everyone!

Ready to start implementing VoiceOver? “Implementing VoiceOver with a Custom Rotor” provides an example of how to integrate your app with VoiceOver’s rotor.