Accessible designs support accessibility personalizations, allowing all users to have a great experience. While some accessibility features are built into SwiftUI, there are a variety of modifiers that you can apply to give the iOS accessibility system more information.

From assistive technologies such as VoiceOver to features such as Large Text Size, you’ll want to make sure that everyone can interact with your designs regardless of individual needs.

In this tutorial, we’re going to take a look at an existing Judo file to see how we can make it more accessible for all.

Let's start by testing this starter file with VoiceOver. For those unfamiliar, VoiceOver provides audible descriptions of visible content, aiding users who need additional information for easier navigation.

If you have Siri enabled, ask it to turn on VoiceOver. Otherwise, enable it from your Settings.

Let’s begin by sending the starter file over to our mobile device. With the Apple Mail file open in the Judo mobile app, what does VoiceOver read when you click on an email?

It reads the sender’s name first, followed by the time, the subject, and then the body. In the real Apple Mail app, VoiceOver reads it in this order instead: the sender’s name, the subject, the time, and the body.

To set the order in which layers should be read, we can apply the Accessibility Sort Priority modifier to each layer to set their level of priority. The highest numbers are read first.

Each email preview on the Inbox screen is an Instance of the Row Component, so let’s first click on the Sender Text layer in the Row Component on the canvas. Then, from the Inspector panel, insert the Accessibility Sort Priority modifier. Let’s set the Priority of this one to 3. Then, follow the same steps for the Subject and Time Text layers, setting their Priority to 2 and 1, respectively.

Now when you send the file over to your mobile device, VoiceOver should read each email as follows: the sender’s name, the subject, the time, and the body.

Some emails on the Inbox screen feature a blue dot on the left-hand side, indicating that the email has not been read. Since this Circle contains no text, VoiceOver disregards it as there is no content to read. So, let’s give it a label so VoiceOver understands its significance.

To do so, select the blue Circle in the Row Component on the canvas, and from the Inspector panel, apply the Accessibility Label modifier. Let’s set the Label to Unread.

Since we had set the priority for all of the other layers in the Row Component, let’s apply the Accessibility Sort Priority modifier to this layer, too. Let’s set the Priority to 4 so that this accessibility label gets read first.

Now when you send the file over to your mobile device, VoiceOver reads the emails that have not been opened yet in the following order: 'unread', sender name, subject, time, body.

Let’s open the first email in the Judo mobile app by double tapping the unread email from Jeep. In the email header, the sender’s initials are placed in a Circle. When you tap on the Circle, VoiceOver reads the letters inside the shape out loud.

Since these letters do not bring value to the user, we can use the Accessibility Hidden modifier to hide it from the accessibility system. The Email Header in the Jeep and Detail Screen is an Instance of a Component, so let’s click on the ZStack labeled Profile in the Email Header Component and apply the Accessibility Hidden modifier from the Inspector panel.

Now, when you preview the design on the mobile app, VoiceOver will disregard the profile image.

Another way to make a screen more user-friendly is to set how the app structures accessibility information. Right now, most elements are read separately, but by applying the Accessibility Element modifier, you can:

Take, for example, the two Text layers under the sender’s name (in this example, the sender is 'Jeep Store'). When you preview it on the iOS app, every Text layer must be clicked on to be read.

To decrease the number of times a user has to tap on the screen to get the information they need, let’s apply the Accessibility Element modifier to the VStack labeled Details in the Email Header Component. From the Inspector panel, set the Children parameter to Combine.

Now, when you preview your design on the Judo mobile app, VoiceOver will read the To and Reply To Text layers in one shot.

Accessibility traits inform assistive technologies how to interact with a layer. For instance, a Button read by VoiceOver will end with the word 'button'. Every layer has a selection of default traits, but you can override the default trait by applying the Accessibility Add Traits modifier.

Take, for instance, the blue Text layer that reads 'View your maintenance history'.

While it may seem clear that the Text layer is a link since it’s blue and underlined, this may not be as visible to all. Therefore, on the Judo canvas, click on the View your maintenance history Text layer and from the Inspector panel, apply the Add Traits modifier. Let’s choose Link.

Now, when you preview your design in the Judo iOS app, VoiceOver will read 'View your maintenance history link'.

In Judo, you can preview Components and Artboards in different dynamic type sizes to see how your design will react to different user settings. So, with a Component selected on the canvas, you can click on the Preview Controls from the Inspector panel to view your design in different Text Sizes.

You can also compare how your design looks in different user settings at the same time by inserting Instances of the Component that you are previewing into separate Artboards. This way, you can configure the Text size, as well as other Preview Controls, separately for each Artboard.

As you try out different text sizes, you may find that your design still needs some work. Here are a few modifiers that could come in handy:

To make it easier to read text and distinguish between different elements, users can toggle on the ‘Increase Contrast’ accessibility setting in the Preview Controls. You can preview how your design will look with increased contrast by embedding the screen Component in another Artboard and in the Preview Controls, checking the box Increased Contrast.