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

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.

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.


Join the Monday Mailer

I write exclusively for my mailing list. No spam – just my thoughts on shipping side projects, doing your best work, and improving your craft. Each and every week.