How to design an accessible Apple Watch app

May 21, 2020

Apple Watch is built with accessibility in mind, empowering everyone to use their device in the way that suits them best — and your Apple Watch app can take advantage of all these features to create a seamless and inclusive experience.

When you’re designing your Apple Watch app, here are a few considerations to take into account to make it accessible to everyone.

Responsive, responsible reviews

One of the best ways to get a picture of the work you need to do is to explore Apple Watch’s accessibility and display options: These allow people to adjust or augment their interface and interactions with Apple Watch.

You can access accessibility and text settings on Apple Watch or through the Watch app on iPhone.

When designing your app, Dynamic Type and VoiceOver are two core settings worth exploring: Dynamic Type allows people to change the size of their text on Apple Watch, while VoiceOver helps people navigate without having to view the screen. You can enable or adjust either in the Settings app or on your iPhone’s Watch app at any time.  We recommend testing your Watch app with these options enabled to make sure your app is fully accessible. You may also want to consider testing your interface with Bold Text, Reduce Transparency, and Reduce Motion.

For each test you run, ask yourself a few questions: How does your interface change? Are there aspects of your design that are no longer being well-represented? Take detailed notes and screenshots — these can help you go back and address potential issues in both your designs and your app’s Xcode project.

Scale up, scale down

Compared with other Apple products, the small size of an Apple Watch display means far less space for presenting text. As such, it can be tempting to consider specifying fixed smaller font sizes so that more text can be shown on screen at once.

Despite this, it’s important to use legible font sizes and support Dynamic Type. Displaying more text on screen, while helpful in principle, won’t help anyone if it’s too small to read. Instead, let text scale naturally, and use Apple Watch’s swipe gestures or rotate the Digital Crown to read longer text.

In watchOS 5, four large type sizes were added to the built-in styles on Apple Watch. Each column in this table is manifested as a type size option, which people can set on Apple Watch in Settings > Display & Brightness > Text Size.

The quickest way to support Dynamic Type and text scaling is to use built-in text styles, which set type using Apple Watch’s system font: SF Compact. This font is specifically designed for optimal legibility at small sizes, offering nine built-in styles in a range of sizes and weights to help make text in your app as readable as possible.

As a general rule, all text in your app should scale appropriately when people adjust their text size. Fixed text sizes should be used only for information that is clearly legible at its default setting. For example, the Podcasts app uses built-in text styles to display the podcast title at a consistently large size, and enables its smaller text elements to scale.

When text is set to the smallest size, the Podcasts app displays two full episode rows on a 44mm Apple Watch. At the largest size, there are fewer rows displayed but the episode title, date and duration are much larger.

If you plan to use a custom font within your app, you’ll need to take a few additional steps to ensure that it works with Dynamic Type, including adding the font to your project and configuring text styles.

Learn more about adding custom fonts >

Learn more about scaling fonts using Dynamic Type >

Support VoiceOver with accessibility labels

VoiceOver is a gesture-based screen reader that tells you exactly what’s happening on your Apple Watch, and helps you navigate it without the need to see the screen. You can add support for VoiceOver in your app with accessibility labels, which help people using the feature understand how your interface is constructed.

Fun fact: If you want to quickly test VoiceOver in your app, you can use Siri. Just enable Siri and ask it to “Turn on VoiceOver.”

When someone looks at your interface on Apple Watch, your app can rely on common visual paradigms like button shapes and lists to communicate information and actions. For VoiceOver, think about how you might translate that experience to someone hearing the interface of your app: Start by designating a clear reading order of your interface elements, and make sure that you label your interface elements with brief and clear descriptions.

There’s one more step to consider when implementing VoiceOver: Your audience may want to hear your interface in another language. VoiceOver supports more than 35 languages, and you can make sure your app is ready for use in all of them by localizing your text strings so that all accessibility labels and hints are read in the appropriate language.

Learn more about crafting a great VoiceOver experience in your app >

Learn more about adding accessibility labels to your app >

Learn more about localizing your text strings >

Watch and learn

Apple Watch is our most personal device, and it’s important to provide flexibility for people to experience their apps in the way that best suits them. For everything you create, it’s worth taking the time to test your app and make any adjustments. Whether you’re adding scalable text or incorporating a better VoiceOver experience, these changes have a big impact on people who need or want accessibility features on Apple Watch, and they’ll likely also help you craft better overall designs for everyone who enjoys your app.