Accessibility Gets an Upgrade in Xcode 13 Storyboards

WWDC 2021 is behind us and there are so many new and exciting features available to us as developers. One of those areas that has been getting much more love from Apple over the last few years is accessibility. Apple has been making it simpler for developers to test key tools like Dynamic Type, Dark Mode, and more in the simulator. Since Xcode 11, we’ve had the ability to change numerous accessibility settings in the simulator at run-time with the Environment Overrides pop-up sheet below.

Simulator Accessibility Sheet

This was great for debugging but took time to spin up the app in the simulator and didn’t help much in earlier phases such as storyboard setup. Now with Xcode 13, as noted in the release notes, we can finally see many of these same settings live in UIKit storyboards!

Using the Accessibility Window with Storyboards

Just click the accessibility icon at the bottom left of the storyboard window in the canvas button bar; and you can change type size, contrast/transparency, button shape, bold text, and on/off label settings on the fly. If your storyboard uses features that leverage these settings, you’ll instantly see the storyboard adjust to those changes!

Xcode 13 Accessibility pop-up window

Let’s try some of this out! Let’s look at just a small section of a storyboard with the new icon tapped and Accessibility turned off. Note that you need to flip the Accessibility toggle for any of the settings (slider or checkboxes) to take effect.

Xcode 13 Accessibility disabled

Now we’ll set the Accessibility toggle to the on state and set the Dynamic Type size. Presto! Your storyboard changes on the fly to the larger size so you can evaluate constraints, wrapping, etc.

Xcode 13 Accessibility enabled with larger text size

I have seen a few small issues around this (such as the change not being finalized correctly till you release the Dynamic Type slider) but at this point we are still just on early betas of Xcode 13.

Here’s an example of two of the other settings that can help out your users – On/Off Labels and Increase Contrast. People with color blindness and low vision can benefit from your app supporting these and other features. Note the binary symbols inside the UISwitch controls.

Xcode 13 Accessibility enabled with On/Off Labels and Increase Contrast set

Users wanting these features will typically turn them on in the Accessibility / Display & Text Size menu in iOS or iPadOS as in the image below.

Settings app Display & Text Size Accessibility options

The new Xcode 13 options will now let you preview the UI without having take extra time to build and run the app in simulator.

New Dark Mode Appearance Icon for Storyboards

In addition to the above changes, with Xcode 13 we can also click the small icon just to the right of the Accessibility icon to flip the storyboard presentation between Light and Dark Mode. The icon itself is styled identically to the Light/Dark Mode icon available in iOS in the Control Center. Previously in Xcode, you would have to open the “View as” window pane to flip between Light and Dark modes. It’s a small change but one that should save some time for developers.

UIKit Isn’t Dead Yet!

Despite announcing SwiftUI just two years ago at WWDC 2019 and all the push to get on board that train, UIKit most likely still has years of life left. While all the hype around new technologies doesn’t make our choices as developers any easier, Apple announced many new UIKit features at WWDC 2021 and continues to improve Xcode for all developers – and more importantly better the experience for all users.

Accessibility is one area in specific that keeps getting better every year with continuing improvements and refinements. Check out some of the talks on this subject from WWDC 2021. If you’re new to accessibility on Apple platforms, I’d strongly suggest the Accessibility for Developers site as a starting point.

Published by Mark Thormann

As a software developer and architect, I enjoy using technology to craft solutions to business problems, focusing on all aspects of native iOS and Android mobile development as well as application architecture, automation. and many other areas of expertise. I'm currently working at one of the leading career-related companies in the United States, using mobile applications to help connect job seekers in the technology industry to the employment which they need.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: