SwiftUI — Make Content Scrollable when DynamicFont scales up

Sometimes, the slightest font size scaling up can chop content and make it inaccessible to users. How to quickly get out of that? Here’s an Idea: MakeScrollableWhenScaledUp modifier (iOS 14 onwards)

If you are lucky, you are working this out from day one. Probably, you got a bug reported and even though it has been pointed as “low hanging fruit”, it’s just the tip of the iceberg… your app is not accessible at all.

Accessibility is important. Very Important. But it’s also a challenge, often downplayed even by Apple. Unfortunately, areal inclusive accessible app does not come with out-of-the-box SwiftUI features. Even though it’s true that a lot comes “for free”, SwiftUI does not adapt well to font size changes. Views break, text gets inadequately trimmed or chopped. Screens become a deformed version of the non-scaled aspect that could make anyone, even those with a 20/20 vision, dizzy and confused just by looking at them.

How do you make quickly get the content visible in a “backwards compatible” way?

First: Create a product request to your Product Owners to raise awareness of the bigger problem. Attach screenshots and documentation of good Accessibility practices.

Second: Here’s a small trick to make a piece of content scrollable if the DynamicType font scales up.

Make a modifier that contains a ScaledMetric float that tracks the scale the value is being subject to.

import SwiftUI
struct ScrollableWhenScaledUpModifier: ViewModifier {
    @ScaledMetric var scale: CGFloat = 1
func body(content: Content) -> some View {
        if scale > 1 {
            ScrollView {
                content
            }
        } else {
            content
        }
    }
}
extension View {
    func scrollableWhenScaledUp() -> some View {
        self.modifier(ScrollableWhenScaledUpModifier())
    }
}

Apply the modifier to the element you want to make scrollable. Preferably the RootView of your screen.

VStack {
    Text("SOME REALLY LONG LOREM IPSUM")
}
.scrollableWhenScaledUp()

Important: This is just a workaround to make your app less choppy and unaccessible when using bigger font sizes. The real solution is to incorporate Accessibility into your product as a first class citizen. Accessibility is not a layer. It’s a core feature that has to be built from the ground up.