Improve the Accessibility of Images in Your WatchKit App

While browsing through the WatchKit Framework Reference recently, I noticed an interesting class: WKAccessibilityImageRegion. Intrigued — and unable to find anyone else who had tried it out — I put together a quick example.

Essentially, WKAccessibilityImageRegion allows you to add accessibility labels to specific parts of an image. Let’s say you have a photo of a group of people.

Tim Cook, Jony Ive, Dave Grohl, and Nathan Mendel

By default, WatchKit allows setting the usual accessibility properties for the image as whole: label, hint, value, and traits. By employing WKAccessibilityImageRegion, however, we can call out each person individually.

Let’s define an area around Tim Cook’s face. We simply create a new WKAccessibilityImageRegion object, set the frame and label, and add it to the group using setAccessibilityImageRegions:.

(Note: In this example, I’ve set the above photo as a background image on a group. While the documentation claims otherwise, I’ve been unable to get this working with a standalone WKInterfaceImage)

Voila! With one simple change, Voiceover not only calls out the image as a whole, but identifies Tim Cook within it.

Please excuse my hairy arm.

Whether you are working with static images, or generating images dynamically, WKAccessibilityImageRegion offers a simple way to improve the accessibility of the images in your WatchKit app.