Case study: Accessibility in a custom component in Swift

Intro

One thing that you need to know about me before start reading. Im an iOS developer employed atm at Daresay. Im also currently working on consultancy basis for a swedish bank and insurance company called Länsförsäkringar AB. Both companies have approved this article in terms of sharing specific bits of code used in a live application on App Store. The images and videos provided are all in swedish.

History

The code base Ive been working in for the past two years is a vast combination between Objective C and Swift. The very first commit was made Mon Oct 22 13:23:07 2012 +0000 so quite a bit of legacy as well.

Fig 1: View derived from Xcode view hierarchy helper.

Custom Component

The component were about to talk about is a composition of labels and shapes basically. The intent is to depict a brief overview of what a customer spends her money on last month. This component is one of many “tiles” on a dashboard that user can choose to show or not in a preferred order. Some are for specific users and others are for all. Let’s call this particular tile PFM (Personal Finance Management) tile.

Below Ive tried to show the traverse order within this component when using a screenreader like Voice Over. As you can see the order doesn't result in anything that makes sense for a user that is visually impaired.

Fig 2: Traversal order when using screenreader such as VoiceOver.

Below you can find how it will look like for a user whom is using Voice Over.

Video 1: Showcase Voice Over traversal on the custom component.

The obvious here is that custom components sometimes needs a bit of extra attention to be accessible for all users. This is often something that is overseen by developers and UX people.

The Fix

Basically the y-axis labels aren't very interesting to a visually impaired user if we aren't exposing the bars and such as well. The first fix is simply to hide the element entirely if it's not of any value to the user.

private func yAxisLabel(text: String) -> UILabel {
        let label = UILabel()
        label.accessibilityElementsHidden = true
        return label
}

The second fix is to group the labels on the x-axis since they belong to a context. The context here is to describe the bar in the bar chart with a text and a value.

private func setup(title: String?) {
        titleLabel.text = title
        accessibilityElements = [valueLabel]
        let titleText = titleLabel.text ?? ""
        let valueText = valueLabel.text ?? ""
        let titleAndValueLabel = String(format: "%@ %@ kronor",
                                        titleText, valueText)
        valueLabel.accessibilityLabel = titleAndValueLabel
}

Result

The outcome here is very trivial but very powerful. We have simply payed a very small amount of attention and effort to verify that this custom component is accessible to all users in an intuitive way.

Fig 3: Traversal order when using screenreader such as VoiceOver after fixes.

Video 2: Showcase Voice Over traversal on the custom component after fix.

References

accessibilityElements — the array of the accessibility elements in the container. Containers can implement this property instead of the dynamic methods to support the retrieval of the contained elements. The default value of this property is nil.

accessibilityElementsHidden — A Boolean value that indicates whether to hide the accessibility elements.

PFM — Personal Finance Management

Länförsäkringar app on App Store

‎Länsförsäkringar