SwiftUI Accessibility: Traits

Rob Whitaker
Oct 23, 2019 · 5 min read
Image for post
Image for post

Accessibility traits are a group of attributes on a SwiftUI element. They inform assistive technologies how to interact with the element or present it to your customer. Each element has a selection of default traits, but you might need to change these as you create your UI.

In SwiftUI there are two modifiers to use for traits, .accessibility(addTraits: ) and .accessibility(removeTraits: ) which add or remove traits respectively. Each modifier takes as its argument either a single accessibility trait or a set of traits.

Button(action: {}, label: { Text(“Button”) })
.accessibility(addTraits: [.isSelected, .playsSound])
.accessibility(removeTraits: .isButton)

isButton

isHeader

By swiping vertically VoiceOver users can skip content and only read elements marked with this trait. This is an essential technique for VoiceOver users, as they can’t visually skim a screen to find the content that’s important to them right now.

isSelected

isLink

isSearchField

isImage

playsSound

isKeyboardKey

isStaticText

isSummaryElement

Apple’s Weather app with VoiceOver highlighting the top Summary Element.
Apple’s Weather app with VoiceOver highlighting the top Summary Element.
Apple’s Weather app with VoiceOver highlighting the top Summary Element.

updatesFrequently

startsMediaSession

allowsDirectInteraction

Imagine you have created a music app that provides a piano keyboard for the user to play. Using the VoiceOver paradigm of swiping to key and double tapping would not produce much of a tune. allowsDirectInteraction disables this control allowing your user to play the keyboard by directly tapping the keys. This means your user doesn’t have to disable VoiceOver for the rest of the UI. A game might be a good use for this trait. Inappropriate use of this trait will create a worse experience for your VoiceOver users.

Apple’s Garage Band app displaying a piano keyboard
Apple’s Garage Band app displaying a piano keyboard
Apple’s Garage Band app with VoiceOver highlighting the keyboard view. This view has the trait Allows Direct Interaction allowing multi-touch interaction while still VoiceOver navigation of the controls above the keyboard.

causesPageTurn

This trait causes the assistive technology to call the closure in your .accessibilityScrollAction() modifier on your parent view immediately after completing reading the content. The assistive technology will then continue reading the new content. Reading will stop if the content does not change after calling this closure, or if you haven’t implemented this modifier. Scroll views implicitly handle the .accessibilityScrollAction() for you. If you want to continue reading in another way, say by transitioning to another screen, or swiping on a carousel, you will need to use this modifier.

isModal

Flawless iOS

🍏 Community around iOS development, mobile design, and…

Rob Whitaker

Written by

iOS Engineer at Capital One. Author, Developing Inclusive Mobile Apps, Apress. https://amzn.to/3aNRQ6d

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Rob Whitaker

Written by

iOS Engineer at Capital One. Author, Developing Inclusive Mobile Apps, Apress. https://amzn.to/3aNRQ6d

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store