Day 117

Adapt layouts for accessibility text sizes

12 Sep 2022

Sometimes, with large font sizes, there's no other way around it but to offer an alternative layout. Small tweaks are often enough. Otherwise, the text will be barely readable. Larger text shouldn't mean less content or a worse experience.

Apple music app. It shows a hypothetical case where the app scales text but doesn't change the layout. Only a few letters of the name of the song fit in each cell and there is no room for the name of the artist. In the other one, it shows how it actually works. The cover art comes above the text, instead of to the left, and the name of the song has three lines instead of just one. The code shows a way of doing this. You can override traitCollectionDidChange to get notified if the user changes the dynamic type size. In there, you can check the preferredContentSizeCategory from the trait collection, and it has a property called isAccessibilityCategory. In that case, you can offer an alternative layout.

One thing you can do is to check if the preferred content size category of a view is an accessibility category. And, in that case, move things around to make room for the text, offer more lines of text, etc.

https://developer.apple.com/documentation/uikit/uicontentsizecategory/isaccessibilitycategory

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!
Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.
- A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.
- Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

Day 160

Turn on larger accessibility text sizes

Reminder to enable Larger Accessibility Sizes, so you can pick from one of the five extra accessibility sizes when configuring text sizes. You can do it from Settings, Accessibility, Display & Text Size, and Larger Text.

Day 191

Stress-test UI with Double-length Pseudolanguage

I recommend running your app with Double-length Pseudolanguage. It is a great way to stress-testing your app and see how adaptive it is and if your UI will hold to other languages that might be a bit more verbose or even with larger text sizes.