Improving accessibility for iOS apps — part 3

How to start supporting VoiceOver for Custom Views

In the past couple of weeks, we have discussed the basics of accessibility in iOS and VoiceOver gestures. Today, let’s continue with another Accessibility topic: Custom Views. VoiceOver will work out of the box in case of using UIKit components such as UILabel, UIButton, UISlider, etc. But what if you are using Custom Views, which use an overridden version of draw method, or you have used plain UIViews to compose them to draw some charts? Don’t worry! It is still super easy to support VoiceOver for Custom Views, which we’ll cover in this post.

Let’s assume that we have a custom bar chart view, which uses an array with double values to draw the columns. I’ve created a graphic example of a BarChartView (for demonstration purposes only, so don’t judge me for the design 😉)

A custom bar chart view

As you can see, we have a custom view which draws columns based on some double values. Here is the source code of this chart view.

Let me describe the logic. As soon as we set an array with doubles to value property, it calls the setNeedLayout method, which runs a layout cycle by calling the layoutSubviews method. In the layoutSubviews method, we do all the logic, like creating bar views, calculating sizes based on provided double values and adding these bars to the chart view.

Now it is time to plan what we want to achieve by implementing VoiceOver support.

We want to make VoiceOver focus on the first bar, and not on the chart itself.

2. We want to navigate through bars like through UILabels or other UIKit components with default accessibility support.

3. We want to give VoiceOver the ability to read the values of every bar in the chart.

It sounds like an overwhelming job, but it is actually straightforward to implement, let’s dive into the details.

As you can see in the code example, all we need to do is to populate the accessibilityElements array of UIView with accessibility elements. It makes it possible for VoiceOver to focus on child views of the parent view. Let me describe the code step by step.

1. We create accessibilityElements array, which will store our bars’ accessibility description.

2. During the bar creation process, we create UIAccessibilityElement with accessibilityContainer, which describes the parent container for the bar.

3. We set the accessibilityFrameInContainerSpace property of accessibility element to the bar’s frame. It shows VoiceOver the area inside the chart view which should be focused and highlighted.

4. And the last thing we have to do is override the value of the accessibilityElements property with our populated array.

That’s all we need to do to implement VoiceOver support for our custom bar chart view. You can use the same approach to support VoiceOver for views which use layer-based drawing or even for SpriteKit nodes.

In this series of posts, we covered the essential accessibility use cases, which will help you to make your app valuable for everyone in the world. See the previous posts here:

Thanks for reading and feel free to contact me if you have any questions.