Prepare your tvOS apps for Dynamic Type

Hi, I'm Isis, and I'm an engineering manager on the accessibility team. This year, there is great news for accessibility on tvOS 27. Large Text support is now available, bringing system-wide text scaling to every app on the platform. Many people need or prefer different text sizes, and making your app dynamic helps everyone get a great experience. Your tvOS app customers have been waiting for this accessibility feature. And I'll show you how to make the most out of it in your apps. In addition, you'll be able to indicate support for Larger Text in your Accessibility Nutrition Labels for tvOS in the App Store. This is a great way to reach users who specifically look for accessible apps that support larger text.

In this session, I'll start by covering how Large Text works on tvOS and where people can find it. Then, I'll go into identifying small parts of your app that you may need to adjust for larger text sizes.

And finally, I'll touch on a few examples of how to adapt layout in response to text size.

Let's start with an overview. If you're familiar with Dynamic Type on iOS, you have a head start! Dynamic Type works the same way on tvOS.

UIKit and SwiftUI can adapt text sizes automatically based on what someone prefers. This gives people control over the text size to match their needs and comfort.

People can turn on larger text sizes in the Settings app. By navigating to Accessibility, Display, then Text Size.

They'll have the option of choosing text sizes starting at Large all the way up to Accessibility XXXL. I'm working on a media app that lets people discover and watch their favorite movies. Here's how this app adapts to these larger text sizes. This media app has a tab bar at top for navigation. There's a large title, with a few action buttons, and a gallery of movie posters to explore in a collection view below that.

With larger text sizes turned on, the navigation title at the top has become much larger.

In the tab bar, each label is now bigger, and all of the text throughout the interface has scaled up significantly. Standard UIKit and SwiftUI components like Labels, Buttons and Navigation tabBars handle this automatically. For your apps, your job is just to identify and update any custom elements that may need attention. When examining your app with Large Text, there are a few types of issues to identify. When your app runs with larger text sizes, you'll want to ensure that you avoid fixed font sizes that don't allow your text to scale.

Interfaces that don't adapt to dynamic type, like hard-coded sizes or constraints, may cause issues like truncation of text or clipping of UI elements.

You may also need to adjust layouts for the padding and spacing needed when some elements grow to larger sizes.

Here's an example from my media app where the description of a movie is displayed.

There is a title shown at the top, with text labels and controls towards the bottom.

With text set to the largest size, most of the text has grown larger… But, there's one text element on the left that isn't scaling. That is the caption that reads "Signup information" above the controls that let someone sign up, buy, or rent a movie. Now, a caption like this may have hard-coded text sizes for a specific layout reason. For example, it might have originally been in a container with static dimensions or rigid constraints. While this can seem appealing for creating predictable layouts, it's not recommended. This approach lacks flexibility and can't adapt to larger text. Instead, adapt the layout to be flexible and remove the hard-coded values. Here is the code representing the Description View of my media app.

It has a VStack, containing the "Signup information" caption, and an HStack containing the buttons and other text information about the movie. This code contains a few different challenges for larger text. It specifies a fixed font size, which will not adapt when someone changes their size preference.

And on the Text view, there is a fixed width constraint to 300 points.

As text grows, 300 points may not be wide enough for the text, which could lead to text truncation.

To make this caption adjust to larger text sizes, I'll replace the hard-coded font style with a semantic text style. In this case, I'll use "caption".

With those changes, the text size is now dynamically growing, but the content is now truncated.

To fix this, replace fixed widths with flexible constraints that let the view grow as needed.

On the text view, I'll replace the fixed width with the parameter maxWidth and set it to infinity. This tells SwiftUI to use as much width as needed for the content.

With those changes, my text view scales beautifully with larger text, and has enough space to display its content. Perfect! To find these types of common issues in your app, search for hard-coded text sizes and migrate to standard styles instead.

Search your app for hard-coded height and width constraints and use flexible constraints to allow your content to grow.

If you're using UIKit, the approach is similar with one additional step. Replace hard-coded fonts with text styles, and set adjustsFontForContentSizeCategory to true. This tells UIKit to automatically update when preferences change.

Sometimes fixing hard-coded values isn't enough. You may want to adapt the layout in response to larger text, while preserving the original layout for default sizes.

Consider this collection view. It contains six movie posters with a title underneath each. With a standard text size, the full title fits comfortably in the space below the image.

With Large Text enabled, there isn't enough room to fit six titles horizontally. This layout will need to be adapted when the text is larger. Here is the SwiftUI code for the view. It presents a horizontal scroll view, with a LazyHStack. Inside a container, I have a button for each cell.

To adapt this layout, I will first read the dynamicTypeSize environment key path. Then, I'll change the columnCount parameter on the cell in the containerRelativeFrame modifier.

When larger text sizes are enabled, I'll set the layout to show 4 columns at a time, instead of 6.

This provides wider cell dimensions and gives each title more room to grow. To accommodate even longer text, consider a custom marquee strategy.

Here's another example where I'll adjust layout in this app. This part of my app contains cards for different types of content, like a video of a beach, or a video of camping.

Each of these content cards contains an image, the title, and a subtitle. With larger text, there isn't enough visual padding between elements, and text is easily truncated with the space that it has.

One solution is to provide a conditional layout for when larger sizes are turned on. Here's how a conditional layout can be achieved in SwiftUI.

First, read the dynamicTypeSize environment value to detect when accessibility sizes are turned on.

Then, create a VStackLayout or an HStackLayout depending on whether larger text is being used. AnyLayout lets you abstract over these two types. Use the new layout like any other stack. It will dynamically switch between horizontal and vertical depending on the text size.

In UIKit, use UIStackView and update the axis property based on preferredContentSizeCategory. isAccessibilityCategory.

Call registerForTraitChanges and pass UITraitPreferredContentSizeCategory to update your layout in response to size changes while your app is running.

Here it is in action in my app's content cards. When larger text sizes are enabled, the layout switches to a vertical stack. This lets the title and subtitle grow to the entire width of the cell, rather than sharing the width with the image. This layout also allows the cells to become taller to provide more room for the content.

Now you're ready to test your app with larger text sizes on tvOS. Discover where you can make refinements by using system text styles and tailoring your layouts to prioritize text legibility.

Here's your action plan. Use standard text styles instead of hard-coded fonts.

Test systematically with Large Text enabled.

Adapt layouts when needed for best experience. And indicate support for Larger Text in your app's Accessibility Nutrition Labels for tvOS.

Now it's your turn to make your tvOS app accessible for everyone! Thanks for watching!