Defining isAccessibilityElement in your iOS Application

I remember the first time I tested an iPad app for accessibility. Yahoo! Finance was preparing to launch MarketDash and wanted to make sure it was as accessible as the web site. With VoiceOver enabled and a Flip cam set to record, Victor Tsaran and I began exploring the app. The most confusing bug we found was an empty article page.

It was impossible to read a news article with VoiceOver enabled. It worked fine with VoiceOver disabled and I could read the article in Safari. However, the article within MarketDash was a black hole.

The Finance engineers added confusion by responding with "we needed to remove the accessibility setting." In other words, they made it more accessible by removing accessibility. Perhaps you’ve had a similarly confusing experience.

What is isAccessibilityElement?

This article introduces isAccessibilityElement, how it determines what elements are interactive, and how it can easily create accessibility problems. Fortunately, this is an easy concept to understand and fix in your applications.

To understand isAccessibility, imagine playing with some Russian matryoshka dolls. The largest doll contains a set of nested dolls that progressively get smaller. When you close the larger doll, you are not able to play with the smaller dolls. When you open a larger doll, you are able to access and play with a smaller doll. This is true until you get down to the smallest, most granular doll.

isAccessibility determines what element can be focused when VoiceOver is enabled. Placing it too high, i.e. the parent, blocks focus on the child elements. The article page on MarketDash uses a custom view that contains a web view. Originally the custom view had isAccessibiltyElement set to YES, which made it impossible to read the web view. The solution was to set isAccessibilityElement on the custom view to NO and set the web view to YES.

MarketDash with incorrect Accessibility setting

The parent container has isAccessibility in this illustration

MarketDash article with Accessibility set correctly

This illustration shows the web view and control bar with Accessibility enabled

This problem is also seen frequently on Table Views. The thumbnail view in the Flickr application is a good example. We want the user to access the individual images, which sit inside a UITableViewCell, which sits inside a UITableView. The solution is to set isAccessibilityElement to NO on the table and cell. You’ll also need to set the thumbnails to YES.

Setting Accessibility on parent makes it impossible to select a row or thumbnail

The row has Accessibility, which makes it impossible to select a thumbnail

placing Accessibility on thumbnail makes it interactive

Setting isAccessibilityElement

There is a default setting for isAccessibilityElement and you’ll only need to set this in special circumstances.

The default value for this property is NO unless the receiver is a standard UIKit control, in which case the value is YES.

Assistive applications can get only information about objects that are represented by accessibility elements. Therefore, if you implement a custom control or view that should be accessible to users with disabilities, you should set this property to YES. The only exception to this practice is a view that merely serves as a container for other items that should be accessible. Such a view should implement the UIAccessibilityContainer protocol and set this property to NO.

UIAccessibility Protocol Reference – Apple

Setting isAccessibilityElement via Interface Builder

screenshot of Xcode and the accessibility option

The thumbnail in this TableViewCell has Accessibility enabled in Interface Builder

Open the Accessibility group in the inspector panel of XCode. Highlight the object that needs to be modified and select the Accessibility Enabled option.

Setting isAccessibilityElement in Objective C

You will often need to set the accessibility dynamically. Apple’s sample application Formulaic includes various accessibility settings. In this example, the code turns off isAccessibilityElement within the implementation specifications. There are only two options for this setting “YES” or “NO”.

// if a UIView implements the container protocol, it cannot be an accessible element

- (BOOL)isAccessibilityElement

{

    return NO;

}

You can also set this during instantiation. This example comes from a lecture given by Chris Fleizach, available on Stanford University’s iTunesU – Developing Apps for iOS 2010 (look for lecture #18).

-(void)setupBowlingBall

{

    bowlingBall = [[BowlingBall alloc] initWithFrame:CGRectZero];

    …

    bowlingBall.isAccessibilityElement = YES;

    bowlingBall.accessibilityTraits = UIAccessibilityTraitButton;

    …

}