iOS Accessibility: Getting Started

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:

1. Left Arrow button isn’t a great description for the navigation. How would the user know what the button does?
2. The emoji face states are: heart shape eyes and confounded face. Those explanations would confound any user!
3. 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:

1. Turns off accessibility for checkmark button so VoiceOver reads it as one unit instead of two different accessibility elements.
2. 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.
3. 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!