In our previous discussions, we've touched upon the fundamentals of accessibility in iOS and delved into VoiceOver gestures. Today, we will continue our journey by exploring another crucial aspect of accessibility: Custom Views. While UIKit components like UILabel, UIButton, and UISlider are inherently compatible with VoiceOver, what happens when you're working with Custom Views that utilize overridden versions of the draw method or employ plain UIViews to render complex charts? Fear not! The process of enabling VoiceOver support for Custom Views remains remarkably straightforward, and in this post, we will guide you through the necessary steps.
How to start supporting VoiceOver for Custom Views
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 😉)
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.
