Accessibility is an important topic when developing a mobile app that should be available for everyone. Research from The World Bank shows that one billion people around the world experience some form of disability. That is 15% of the world’s population!

When developing an app, it is important to think about users who use the app with a disability. If you make your app available including accessibility optimization, everyone in the world is able to use your app.

Accessibility Inspector

The Accessibility Inspector is a useful tool to understand the necessary adjustments that needs to be done to make your app available for persons with disabilities. The tool is provided by Apple and is included in Xcode.

You can find the Accessibility Inspector in the menu bar of Xcode under Developer Tools.

Open the Accessibility Inspector using Xcode
Open Accessibility Inspector using the Xcode menu.

On the left side of the Accessibility Inspector, you are able to select the targeted device. This can be your Mac, but also a simulator or real device (if connected). You are able to analyze both your own apps and apps from others, which means you’re also able to validate apps created by Apple!

The Accessibility Inspector tool contains three options in the left menu bar. The first option is to check information about elements, like the label that is given to an image or button.

The second option is the most powerful option in my opinion, which is the run audit functionality. When pressing the ‘Run Audit’ button on this screen, the Accessibility Inspector will generate a list with possible optimizations you can make to improve the experience of your app for persons with disabilities.

The last option is useful to check accessibility settings. This can be very helpful if you want to validate your app with different font sizes. Other helpful options are the reduce transparency and reduce motion options.

Running an audit

The Accessibility Inspector makes it easy to generate a list of improvements you can do to make your app more accessible for persons with disabilities.

When pressing the button, a list of different improvements will be listed, but it may not be clear how you are able to solve all of those issues. I will explain the most important improvements and explain how you can optimize them.

Run an audit with the Accessibility Inspector.

Hit area too small

When displaying small buttons to your users, it may be invisible or hard to press the button. Apple advices to have each button a minimum of 44 pixels in width and height.

When a button width or height is 44 pixels or above, the hit area is large enough to be touched by your users.

In the Calendar app, the width of the search icon is 40 pixels, which should have a minimum of 44 pixels.

Dynamic font sizes

When configuring a new iPhone, users are asked to change the default font size to a smaller or bigger font size if needed. Because of this, lots of iPhones are configured with a different font size than the default font size.

Most of the time dynamic font size is not supported when you’re using a custom font type. This can be easily solved using a UIFontMetrics. Also, the property adjustsFontForContentSizeCategory must be set true to allow dynamic font sizes for labels, buttons and other UI elements.

Code example:

let customFont = UIFont(name: "CustomFont-Light", size: UIFont.labelFontSize)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

The code example above is first creating a UIFont object, which set the type and size of the font for default behaviour. Using the UIFontMetrics object, the custom font is allowed to scale.

Using the adjustsFontForContentSizeCategory property, the scalability of the UI element will be enabled. By default, this property is set to false, which means UI elements won’t scale by default.

Voice over

The voice over setting allows users with a visual impairment to pronounce the UI elements which are displayed on the screen. To support voice over in your app, each button, label or other UI element that appears on the screen, must have set an accessibility label.

There are two properties of an UI element which can be set.

accessibilityLabel
This property provides descriptive text that voice over reads when the user selects an element.

accessibilityHint
This property provides additional context (or actions) for the selected element.

Be sure that you set both properties correct when you want to support voice over in your app. Also think about the accessibility hint you want to be pronounced to the user. For example, a button that contains a label ‘Call 911’, must get the accessibility hint ‘Press this button to call 911’.

To enable accessibility for your UI element, simply set the property isAccessibilityElement true.

Code example:

alarmButton.isAccessibilityElement = true

When Xcode 11 will be released in September, the Accessibility Inspector will get a new functionality to pronounce the UI elements on the screen, which makes it easy for developers to test voice over.

Contrast in colors

Designing an app will bring a lot of different colors in your app. Apple recommend having a good contrast for readability. This means that the contrast between text color and the background color must have a different ratio of 3 or more. If the ratio is below 3, you will get a warning.

A contrast issue can be easily fixed by updating the text or background color of the element.

Conclusion

Using the Accessibility Inspector, you will get a lot of insights about optimizations you can do to improve your app. This makes it possible to allow persons with disabilities to use your app.

The above optimizations are just examples you can do to make your app more accessible. Find out who the audience is of your app and ask them to give feedback about their usage with the app.

Good luck with making your app more accessible for your users!

🚀 Like this article? Follow me on Twitter for more iOS related news!

Categories:iOS