In honor of Global Accessibility Awareness Day (GAAD) 2020, I present to you 5 quick ways to make your existing iOS application more accessible:
1. Add an accessibilityLabel to all UI elements.
The accessibilityLabel is read aloud with VoiceOver to describe a UI element. For example, if the user selects the back button on a screen in your app, VoiceOver may say “Back button. Double tap to select.” In this case, “back” is the accessibilityLabel. In the absence of an accessibilityLabel, VoiceOver would say “Button. Double tap to select.” As you can see, the VoiceOver user would have no idea which button s/he is selecting when there is not an accessibilityLabel. To fix this, go through your app and add a short accessibilityLabel to all buttons and images in your app:
backButton.accessibilityLabel = “Back”
profileImage.accessibilityLabel = “Profile image of user”
2. Ignore unimportant elements by setting isAccessibilityElement to false.
By default, VoiceOver will try to describe all UI elements to the user. If there are elements that you do not want read aloud, set their attribute isAccessibilityElement to false. For example, you have a background Lottie animation running on your screen. This is great for sighted users, but it could probably be ignored for VoiceOver users. In that case you set lottieView.isAccessibilityElement = false.
3. Set the accessibilityTraits for headers.
When navigating a screen with VoiceOver, it’s hard to tell which text is a title, subtitle, or part of a body text. To fix this, you can edit the accessibilityTraits of UI elements. Specifically, you can set headerLabel.accessibilityTraits = .header
With this specified, VoiceOver will read the text of the header followed by the word “header”.
4. Set the accessibilityHint for buttons.
In addition to the accessibilityLabel described in step 1, you can add an accessibilityHint to elements that make it even more clear what will happen if the user selects an element. For example, you have a button on your page to contact the support team. The accessibilityLabel is “Contact support”. The accessibilityHint is “Double tap to leave the app and start writing an email to our support team”. The full audio description of that button would be: “Contact support button. Double tap to leave the app and start writing an email to our support team.” This makes it 100% clear to the users what is going to happen if they decide to select that button.
5. Increase touch targets to 44x44pt
Small touch areas can be difficult to click on, specifically for users with limited mobility. To make your touch targets more accessible, Apple recommends using a minimum size of 44x44pt. With this in mind, go through your UI and verify all touch areas meet this minimum size. If they don’t, you can enlarge the element, or you can play with the element’s padding or wrap the element in a transparent view so that the element itself stays the same size, but there is an invisible touch target surrounding it.
Thanks for reading! I hope you use this list to add a bit more accessibility to your existing apps, and I hope this inspires you to learn more about accessibility in general. There are plenty of blogs and tutorials that go more into detail about improving the accessibility of your app. Additionally, you can read Apple’s accessibility guidelines here: https://developer.apple.com/accessibility/ios/
To learn more about Global Accessibility Awareness Day (GAAD), check them out on their website and on Twitter: