The Ultimate Beginners Guide to Accessibility

The Americans with Disabilities Act requires websites to be accessible or risk being discriminatory against those with disabilities and be slapped with a fat lawsuit. Many companies have fallen victim to these lawsuits for their websites like Domino’s Pizza, Beyoncé, and hundreds of others. Though the act only applies to websites, mobile apps are not too far away.

One way we can improve accessibility in iOS is through VoiceOver. VoiceOver is an aspect of iOS that converts the selected object’s text to speech and reads it aloud. You can toggle it on by navigating to the Settings app > Accessibility > VoiceOver.

Now, if you have ever used the accessibility library, you will know it works similarly to how website accessibility. A screen reader will focus on a specific element like a button or text label and will highlight it and announce its defining text and element type out loud I.e. “Cancel Button”. This is a simple example of how accessibility works, where things get stranger is when you have more complicated UI elements like Table views or collections views. Providing accessibility to custom views can be difficult since if the view is constantly changing the screen reader sometimes can’t keep up or it will lose its focus and end up confusing the user. In this article, we will go through examples of when accessibility does not perform as intended and how to address these issues. Before we dive into that, here are some basic aspects of iOS accessibility.

Accessible

Every UI element in iOS development can be focused on by VoiceOver as long as its ‘isAccessible’ Boolean value is set to true.

var titleLabel: UILabel!
titleLabel.isAccessibilityElement = true

Label

Let’s say you want VoiceOver to read a specific string for an element, instead of the what VoiceOver determines to read. This can be achieved by defining an element’s accessibility label.

titleLabel.text = "Welcome to Accessiblity"
titleLabel.accessibilityLabel = "\\(titleLabel.text) The content below is an accessible wonderland"

Trait

An accessibility trait will define the element’s traits to help the user gain more of an understanding of what they are focused on. For example, if there is a label with an embedded link, you would assign it the trait “link”. Even though the element is a UIlabel, VoiceOver should announce that it is an actionable link.

let linkStr = NSAttributedString ( 
      string: "Go to Apple.com for products",
      attributes: [
    NSAttributedString.Key.link: URL(string: "Apple.com")!
    ]
)

titleLabel.attributedText = linkStr
titleLabel.accessibilityTraits = UIAccessibilityTraits.link

Hint

An accessibility Hint will read a specified string for its element a bit after the accessibility label. This is useful for defining specific instructions, more context, etc.

titleLabel.attributedText = linkStr
titleLabel.accessibilityTraits = UIAccessibilityTraits.link

titleLabel.accessibilityHints = "Double tap to navigate to apple.com for more products"

Announcements

The accessibility framework allows you to choose the focus or phrase being announced without any interaction from the user. For example, on the initial view of a screen, the VoiceOver reader should announce what screen is being displayed or focus on the title of the screen.

override func viewDidLoad() {
  super.viewDidLoad()
    UIAccessibility.post(notification: .announcement, argument: titleLabel)
}

// or 

UIAccessibility.post(notification: .announcement, argument: "Welcome to accessibility Screen")
}

Table Views and Collection Views

The accessibility components mentioned above can be applied to any UI element in Swift, whether it’s a custom element or plain native element. A good example would be to show how accessibility on a table view.

In the image above you can see multiple cells displaying songs. Each cell has an Image, song title, and musician title. The accessibility code for these cells should be defined in the CellForAt method, since what should be read out changes with each cell.

cell.isAccessibilityElement = true
cell.songTitle.isAccessibilityElement = false
cell.musicianTitle.isAccessibilityElement = false
cell.albumArtImageView.isAccessibilityElement = false

cell.accessibilityLabel = "Song title \\(cell.songTitle), from \\(cell.musicianTitle)"
cell.accessibilityTraits = UIAccessibilityTraits.link
cell.accessibilityHints = "Double tap to be directed to the this song on Itunes"

• Only the Cell is accessible since I want it’s content to read out as a whole in a complete sentence.
• The cells contents are not accessible since their values are already mentioned in cells accessibility label.
• If the user selects a cell they are directed to iTunes, I define this behavior by setting its trait as a link and in the hint.

But sometimes voiceover doesn’t function as intended. One example of that is with Table Views or Collection View when their content is dynamic. For example, think of a table view where if a cell is selected more cells are added to the Table view. When the Table view reloads to display the new content it will reuse cells to improve performance, but the issue with that is if VoiceOver is running and selected on a cell it will lose focus since that cell is reused for a different cell in the table view. The solution to this problem is to force the table view to reload one cell at a time. Below is an example of how to reload a table view one cell at a time.

extension UITableView {
  func reloadTableView() {
      if UIAccessibility.isVoiceOverRunning {
        for section in 0..<self.numberOfSections {
          for row in 0..<self.numberOfRows(inSection: section) {
            self.reloadRows(at: [IndexPath(row: row, section: section)], with: .automatic )
          }
        }
      } else {
        self.reloadData()
      }
  }
}

Conclusion

This guide is by no means everything the accessibility framework has to offer, but it is everything you need to know to get started with making your app more accessible in a user-friendly manner. If you would like to learn more about accessibility, you can visit Accessibility on iOS – Apple Developer. Here you will find the official documentation video and more from apple on various other resources on accessibility.