Accessibility in iOS 14 Widgets With SwiftUI
By: Rudrank Riyam
Tags: Programming, Swift, iOS, Accessibility, Swiftui

Display/Text Sizes and Widgets

Dynamic Type is a feature that helps the user to change system text size according to their preference. For many, it may be just a choice, but for some, it is a necessity.

Another great thing about SwiftUI is that this feature is supported out of the box. If you’re using the normal Font and not hardcoding the sizes, SwiftUI will automatically scale the text sizes according to the system preference. And this applies to widgets as well.

.font(.caption2)

The best way to support this feature is to test it. If you find your design getting out of the widget even in non-accessibility category sizes, you may need to rethink your designs in an accessibility-oriented way because widgets are supported on the iPod Touch (4" display) and SE(4.7" display) as well, and it should look good on all the devices.

Supporting accessibility text sizes

But I understand. Widgets are small, and you may find it difficult to support the accessibility category sizes. Or even xxxLarge/xxLarge sizes. In that case, you can try to handle these cases with a different design altogether.

Supporting large text sizes

Apart from scalable fonts, if you go to Settings > Display & Text Size, you’ll find several preferences for the users to set like Reduce Transparency, Increase Contrast, Differentiate Without Color, etc.

To respect the user’s preferences, SwiftUI gives us powerful environment values that you can read from and add conditions in your widgets accordingly.

I’ll briefly list one and how to use it.

legibilityWeight This reflects the value of the Bold Text display setting. By default, the view adapts to it automatically. But if you have specified a font weight, you can add the condition to respect the value of legibilityWeight .

Supporting bold texts

The whole list can be found in the EnvironmentValues documentation, which lists the major ones that you can adapt in your widgets. Most of them can be configured in that way by providing a conditional view or modifier, like in the case of sizeCategory and legibilityWeight .

accessibilityDifferentiateWithoutColor Use a different design with shapes and symbols to convey meaning instead of just relying on color when this condition is true.

Use a different design with shapes and symbols to convey meaning instead of just relying on color when this condition is true. accessibilityReduceTransparency With this condition true, the background should not be transparent or blurred but opaque instead. A great example is the Batteries widget, which has a translucent background but becomes opaque when this boolean is set to true .

With this condition true, the background should not be transparent or blurred but opaque instead. A great example is the Batteries widget, which has a translucent background but becomes opaque when this boolean is set to . colorSchemeContrast You can adapt your UI to handle the ColorSchemeContrast increased case by increasing the contrast ratio by providing alternate high contrast images and colors.

There’s a great WWDC 2020 session on making your app visually accessible that I recommend you watch. One particular line that stood out for me by Drew Haas was the following: