iOS Accessibility: The Basics

Overview

Let's step through making an accessible iOS app!

We've already created a sample app for you - A11yTube. This sample application is a multimedia app that displays a list of videos and let's you play one. On the outside the app looks good - it has correct color contrasts and touch target sizes. However, the app doesn't implement any iOS Accessibility protocols. We'll step through and implement the APIs to make this app fully accessible.

You can download a starter project here.

We will go over the following things to make this app accessible:

  1. Dynamic Type
  2. Reduce Motion & Transparency
  3. Labels, Hints and Traits
  4. Accessibility Containers
  5. Video Transcript

Dynamic Type

Dynamic Type allows users to specify their preferred font size (for apps that support Dynamic Type) in the Settings app. This makes it easy for visually impaired users to increase the size of the text, or, on the other end of the spectrum, those with sharp vision to decrease the font size to fit more information on each screen. Learn more about Dynamic Type here.

In order to support Dynamic Type, we cannot assign fixed font-sizes to our labels, but instead must use a Text Style. Various Text Styles are shown on the right.

For each label in Storyboard, change the Font attribute from a fixed number to a Text Style, as shown below:

Unfortunately, this will only work when our app starts up for the first time. In order to dynamically change the font size, we will need to respond to a call from Apple's API.

VideoTableViewCell.swift

override func prepareForReuse() {
    titleLabel.font = UIFont.preferredFont(forTextStyle: .title1)
    ratingLabel.font = UIFont.preferredFont(forTextStyle: .title2)
    nameLabel.font = UIFont.preferredFont(forTextStyle: .title3)
    dateLabel.font = UIFont.preferredFont(forTextStyle: .title3)
}

We still have one more problem. Our TableViewCell's are small, so they truncate the text and hide some labels. We need our cells to be dynamic too.

VideoTableViewCell.swift

override func viewDidLoad()
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.estimatedRowHeight = 120
Test It!

Open up the Accessibility Inspector and change the font size. Or go into the Setting App -> Accessibility and change the font size. See how the app responds!

Reduce Motion & Transparency

iOS uses transparency and motion to convey a sense of depth in the interface. For users requesting to disable these features, we need to disable our animations and transitions.

Our app doesn't involve any transparency, but we do animate screens on segues and transitions. We'll need to not animate when the setting is turned on:

Apple already takes care of this for us by automatically detecting our segues and changing the animation. If we had custom animation, then we would need to make it conditional based on the user's preference.

Labels, Hints & Traits

All of the elements in this app come from UIKit, and are by default Accessibility elements. For each elements, we need to add an Accessibility Label, Hint and Trait.

Before we fix this, here are a few pointers:

  1. isAccessibilityElement is a flag that makes the item visible to accessibility features when true. For most UIKit classes the default is true, but for UILabel it is false.
  2. accessibilityTraits helps characterize the accessibility element. There is no interaction needed, so you simply set it as having no traits.
  3. Next, you have VoiceOver concisely identify the intent of this label. "Rating" lets the user know exactly what this is for.
  4. accessibilityValue will be read out as part of the label description. Setting the rating here makes that element much more useful.

Accessibility Labels are used by VoiceOver to speak the UI to the user. They are short, localized word or phrase that succinctly describes the control or view, but does not identify the element’s type. Examples are “Add” or “Play.” There are a few rules of thumb when adding labels:

  • Never put the “type” of element in the Label, as VoiceOver will say the type after the label
  • Keep labels clear and concise

Accessibility Hints are brief, localized phrases that describes the results of an action on an element. Examples are “Adds a title” or “Opens the shopping list.”

Accessibility Traits are a combination of one or more individual traits, each of which describes a single aspect of an element’s state, behavior, or usage. For example, an element that behaves like a keyboard key and that is currently selected can be characterized by the combination of the Keyboard Key and Selected traits.

You can add a Accessibility Label to each element as follows:

override func viewDidLoad()
ratingLabel.isAccessibilityElement = true
ratingLabel.accessibilityTraits = UIAccessibilityTraitNone
ratingLabel.accessibilityLabel = "Rating"
ratingLabel.accessibilityValue = "5"
Test It!

Turn on VoiceOver and swipe right. Listen to how VoiceOver describes the different elements and adjust your labels as you see fit.

UIAccessibilityContainer

This class defines an object that can be returned through the UIAccessibilityContainer protocol. You can create an instance of UIAccessibilityElement to represent an item that isn’t automatically accessible, such as an object that does not inherit from UIView, or an object that does not exist.

For each label in Storyboard, change the Font attribute from a fixed number to a Text Style, as shown below:

Video Transcript

The W3C requires transcripts for all multimedia.

For each label in Storyboard, change the Font attribute from a fixed number to a Text Style, as shown below:



Figure 1 The sample iOS app.




Figure 2 Various Text Styles in iOS.