iOS Accessibility: Getting Started
In this iOS accessibility tutorial, learn how to make apps more accessible using VoiceOver and the Accessibility inspector. By Fayyazuddin Syed.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
iOS Accessibility: Getting Started
30 mins
- Getting Started
- Getting to Know the Recipe App
- Behind the Scenes of the Recipe App
- Why Accessibility?
- Enabling VoiceOver
- How to Use VoiceOver
- Trying VoiceOver With the Recipe App
- Accessibility Attributes
- Using the Accessibility Inspector
- Using the Inspection Pointer
- Using Quicklook to Check Audio in Xcode
- Highlighting Problems With the Inspector Audit
- Additional Inspector Settings
- Making the Recipe App Accessible
- Transforming the Difficulty Labels
- Checking for Warnings
- Making the Text Dynamic
- Testing Some Other Options
- Transforming the Recipe Detail Screen
- Improving the Checkboxes
- Where to Go From Here?
Transforming the Recipe Detail Screen
Now you’ve taken care of the list of recipe options, you want to see what happens when a user clicks one of the recipes. Run the app on your device, enable VoiceOver and look around the detail view. It sounds something like this:
There are some issues with the VoiceOver interaction in the detail view:
- Left Arrow button isn’t a great description for the navigation. How would the user know what the button does?
- The emoji face states are: heart shape eyes and confounded face. Those explanations would confound any user!
- When the user selects a checkbox, it reads icon empty, which doesn’t explain much.
In each of these cases, it’s important to explain what the state of the control means, rather than how it looks. Back button is clearer than Left Arrow button. Like and Dislike succinctly explain the emojis. You’ll make these two changes next.
To change the navigation, open RecipeInstructionsViewController.swift and add the following to viewDidLoad
, after assert(recipe != nil)
:
backButton.accessibilityLabel = "back"
backButton.accessibilityTraits = .button
Instead of Left Arrow button, VoiceOver now says Back button.
Now, on to the emojis. In the same file, replace the contents of isLikedFood(_:)
with the following:
if liked {
likeButton.setTitle("😍", for: .normal)
likeButton.accessibilityLabel = "Like"
likeButton.accessibilityTraits = .button
didLikeFood = true
} else {
likeButton.setTitle("😖", for: .normal)
likeButton.accessibilityLabel = "Dislike"
likeButton.accessibilityTraits = .button
didLikeFood = false
}
For both Like and Dislike modes, you’ve added an accessibilityLabel
that’s clear about what the button does. You also set accessibilityTraits
to identify it as a button, so the user knows how they can interact with it.
Build and run on a device and enable VoiceOver. Navigate to the detail recipe screen using VoiceOver to test your changes to the buttons at the top of the view.
Now, each of these features has clear, short descriptions that help the user understand their intent. Much better!
Improving the Checkboxes
The final issue is with the checklist. For each checkbox, VoiceOver currently states icon empty followed by the recipe instruction. That’s not clear at all!
To change this, open InstructionCell.swift and look for shouldStrikeThroughText(_:)
. Replace the entire if strikeThrough
statement with the following:
// 1
checkmarkButton.isAccessibilityElement = false
if strikeThrough {
// 2
descriptionLabel.accessibilityLabel = "Completed: \(text)"
attributeString.addAttribute(
NSAttributedString.Key.strikethroughStyle,
value: 2,
range: NSRange(text.startIndex..., in: text))
} else {
// 3
descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"
}
Here’s what this code does:
- Turns off accessibility for checkmark button so VoiceOver reads it as one unit instead of two different accessibility elements.
- The
accessibilityLabel
for the description now uses the hard-coded string"Completed"
followed by the text. This provides all the necessary info with a single visit to the label. - As with the completed code, if a user marks an item as uncompleted, you add
"Uncompleted"
before the label description.
Build and run the app again and see how it sounds. It will be music to the ears of your users. :]
Where to Go From Here?
You can download the completed version of the project using the Download Materials button at the top or bottom of this tutorial.
In this iOS accessibility tutorial, you learned about VoiceOver. You performed manual auditing by scrolling through every accessible element and testing the user experience for yourself. Then you used the Accessibility Inspector to perform audits, look at accessibility element values and perform live dynamic changes to invert colors or change the font size.
Now, you have the necessary tools to make your app more accessible. Knowing you’ll have a positive impact on someone’s life is rewarding.
There are a ton of possibilities with accessibility features. This tutorial only scratches the surface to get you started. Below are more resources to check out:
- Categories of Accessibility
- Accessibility Development Resources
- Applying Accessibility to Custom Views
- Deliver an Exceptional Accessibility Experience
- Accessibility Inspector
If you have any comments or questions, please join the discussion below!