The best way to test VoiceOver is with an actual device, so we strongly recommend using a device if you have one available.

If you do not have a device available, you can use the simulator. Begin by clicking on the Xcode menu and choosing Open Developer Tool → Accessibility Inspector. Build and run the application; once the simulator is running the app, switch to the Accessibility Inspector and select the simulator from the target dropdown list (Figure 24.1).

Figure 24.1  Changing targets in the Accessibility Inspector

Once the target has been set to the simulator, click the Start inspection follows point button on the Accessibility Inspector’s toolbar. As you mouse over and navigate in the simulator, the Accessibility Inspector will provide information about whatever element has focus on the simulator’s screen. VoiceOver is not included on the simulator, but the information shown in the Accessibility Inspector is similar.

If you have a device, open Settings, choose General → Accessibility → VoiceOver, and finally turn on VoiceOver (Figure 24.2).

Figure 24.2  Enabling VoiceOver

There are a couple of ways to navigate with VoiceOver on. To start, slide your finger around the screen. Notice that the system speaks a description of whatever element your finger is currently over. Now tap the Back button in the top left corner of the screen that says Accessibility. The system will tell you that this element is the “Accessibility - Back button.” The system is reading you both the accessibilityLabel as well as what is essentially the accessibilityTraits.

Notice that tapping the Accessibility Back button does not take you back to the previous screen. To activate the selected item, double-tap anywhere on the screen. This corresponds to a single-tap with VoiceOver disabled. This will take you to the previous screen for Accessibility.

Another way to navigate is to swipe left and right on the screen. This will select the previous and next accessible elements on the screen, respectively. The VoiceOver row should be selected. Play around with swiping left and right to move the focus around the screen.

Swipe with three fingers to scroll. Note that to scroll, the scroll view or one of its subviews must be the currently focused element. Play around with single- and double-taps to select and activate items as well as using three fingers to scroll. This is how you will navigate with VoiceOver enabled.

One final useful gesture to know is how to enable Screen Curtain. Using three fingers, triple-tap anywhere on the screen. The entire screen will go black, allowing you to truly test and experience how your app will feel to someone with a visual impairment. Three-finger triple-tap anywhere again to turn Screen Curtain off.

With VoiceOver still enabled, build and run Photorama on your device to test its accessibility. Once the application is running, drag your finger around the screen. Notice that the system is playing a dulled beeping sound as you drag over the photos. This is the system’s way of informing you that it is not able to find an accessibility element under your finger.

Currently, the PhotoCollectionViewCells are not accessibility elements. This is easy to fix.

Open PhotoCollectionViewCell.swift and override the isAccessibilityElement property to let the system know that each cell is accessible.

override var isAccessibilityElement: Bool {
    get {
        return true
    }
    set {
        super.isAccessibilityElement = newValue
    }
}

Now build and run the application. As you drag your finger across the photos, you will hear a more affirming beep and see each cell outlined with the focus rectangle (Figure 24.3). No description is spoken, but you are making progress.

Figure 24.3  Accessible cells

Go back to PhotoCollectionViewCell.swift. You are going to add an accessibility label for VoiceOver to read when an item is selected. Currently, a cell knows nothing about the Photo that it is displaying, so add a new property to hold on to this information.

class PhotoCollectionViewCell: UICollectionViewCell {

    @IBOutlet var imageView: UIImageView!
    @IBOutlet var spinner: UIActivityIndicatorView!

    var photoDescription: String?

In the same file, override the accessibilityLabel to return this string.

override var accessibilityLabel: String? {
    get {
        return photoDescription
    }
    set {
        // Ignore attempts to set
    }
}

Open PhotoDataSource.swift and update collectionView(_:cellForItemAt:) to set the photoDescription on the cell.

func collectionView(_ collectionView: UICollectionView,
                    cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let identifier = "PhotoCollectionViewCell"
    let cell =
        collectionView.dequeueReusableCell(withReuseIdentifier: identifier,
                                           for: indexPath) as! PhotoCollectionViewCell

    let photo = photos[indexPath.row]
    cell.photoDescription = photo.title

    return cell
}

Build and run the application. Drag your finger over the screen and you will hear the titles for each photo.

Currently there is no indication to users that they can double-tap to drill down to a specific photo. This is because the cells do not have any accessibility traits set.

In PhotoCollectionViewCell.swift, override the accessibilityTraits property to let the system know that a cell holds an image.

override var accessibilityTraits: UIAccessibilityTraits {
    get {
        return super.accessibilityTraits | UIAccessibilityTraitImage
    }
    set {
        // Ignore attempts to set
    }
}

You are combining any traits inherited from the superclass with the UIAccessibilityTraitImage. This is done using the | (or) operator to combine the two. Like many other things related to accessibility, this is a legacy of the past. In current, idiomatic Swift, this would be done using an OptionSet by passing the options as an array. But UIAccessibility does not support this syntax, so instead you are using | to group the options, which is how this is done in C and Objective-C.

Build and run the application. Notice that the new trait you added is spoken when you select a cell.

The remaining parts of the application are mostly accessible because they use standard views and controls. The only thing you need to update is the image view when drilling down to a specific Photo. You can customize many views’ accessibility information from within storyboards, and you will be able to do that for the image view.

Open Main.storyboard and navigate to the scene associated with the PhotoInfoViewController. Select the image view and open its identity inspector. Scroll to the bottom to the section labeled Accessibility. Check the box at the top of this section to enable accessibility for this image view and uncheck the box next to User Interaction Enabled (Figure 24.4).

Figure 24.4  Updating the accessibility options

Open PhotoInfoViewController.swift and update viewDidLoad() to give the image view a more meaningful accessibility label.

override func viewDidLoad() {
    super.viewDidLoad()

    imageView.accessibilityLabel = photo.title

Build and run the application and navigate to a specific photo. You will notice that with this small addition, this entire screen is accessible. Finally, let’s turn our attention to the TagsViewController.

While still running the application, drill down to the TagsViewController. Add a tag to the table view if one is not already present. Select a row in the table and notice that VoiceOver reads the name of this tag; however, there is no indication to users that they can toggle the checkmark for each row, nor is the presence or absence of that checkmark communicated.

Open TagDataSource.swift and update the cell’s accessibility hint in tableView(_:cellForRowAt:).

func tableView(_ tableView: UITableView,
               cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "UITableViewCell",
                                             for: indexPath)

    let tag = tags[indexPath.row]
    cell.textLabel?.text = tag.name

    cell.accessibilityHint = "Double tap to toggle selected"

    return cell
}

Build and run the application and marvel at its accessibility.