Tips and tricks to build accessible iOS apps

#365DaysIOSAccessibility

RSS Feed

#365DaysIOSAccessibility

RSS Feed

A year-long journey exploring iOS accessibility, one day at a time. Each post shares practical insights, tips, and techniques to make your iOS apps more accessible.

You should really try to support Dynamic Type. If you can’t for some reason, and you want to fall back to the Large Content Viewer, you can do so. I’d limit it to “sticky” bars. Maybe you have a custom tab bar, navigation bar, or similar? Check the UILargeContentViewerItem protocol. Most UIKit components conform to it already. You'll just need to set showsLargeContentViewer to true and add a UILargeContentViewerInteraction to your component. https://developer.apple.com/documentation/uikit/uilargecontentvieweritem

You may have noticed that navigation/tool/tab bars don't scale with large Dynamic Type sizes. It would take too much space from the screen leaving very little real estate for the actual content. A tap and hold will show the Large Content Viewer.

Images can automatically scale for accessibility content size categories, by setting the adjustsImageSizeForAccessibilityContentSizeCategory property to true, for any UIImageView you'd like to get its size adjusted. https://developer.apple.com/documentation/uikit/uiaccessibilitycontentsizecategoryimageadjusting/adjustsimagesizeforaccessibilitycontentsizecategory

What is the ideal distance between labels? It depends on styles for both of them and the dynamic type size, right? You wouldn't want to have the same distance for small and large text sizes. We can configure a standard distance between baselines.

Ever wondered what the ideal width is for labels so the text is readable? Well, it depends. But readableContentGuide has you covered. You can configure the optimal width independently of Dynamic Type size or Size Classes. https://developer.apple.com/documentation/uikit/uiview/readablecontentguide

An alternative layout for large font sizes can be provided with Auto Layout by having three sets of constraints (common, default constraints, and alternative constraints) and activate/deactivate them depending on the content size category.

If you are displaying something in two or more columns, you may want to change that to as little as one column when using some of the largest Dynamic Type settings to keep the text readable.

One of my favourite Dynamic Type tricks is to use Stack Views and flip the axis from horizontal to vertical given a certain content-size-category threshold. So effortless and it works so well in so many scenarios.

You don't have to offer an alternative layout just for the accessibility category. You can actually compare content size categories. So you could tweak the UI already for anything equal to or larger than .extraExtraLarge, for example.

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. 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

It is possible to use custom fonts and for them to still work great with Dynamic Type. You need to define the default size and use UIFontMetrics to get the scaled font for each one of the styles you'd like to use. https://developer.apple.com/documentation/uikit/uifontmetrics/scaledfont(for:)

I wish the adjustsFontForContentSizeCategory was true by default. Instead, you need to configure it that way so elements adjust their font size as the content size category (dynamic type) changes when a preferred font is used for a given style.

When working with Dynamic Type, I find it useful to remember that sizes for the different text styles won't scale linearly, nor will they do proportionally between them. For larger dynamic type sizes, styles will come closer together in size.

Dynamic Type is a feature that lets a user change the font size (smaller or larger) of the whole system or a particular app. To support it, choose a preferred font based on one of the 11 supported text styles: Large title, heading, body...

With accessibilityRepresentation(representation:), you can create a custom component and it can be perceived by assistive technologies as the view you pass as representation. No need to manually configure accessibility attributes. It is one of the most interesting additions to SwiftUI to help you develop accessible UI components. If your custom component behaves similarly to a native one, this is the way to go. https://developer.apple.com/documentation/swiftui/view/accessibilityrepresentation(representation:)

Showing 106-120 of 230 posts

Special thanks to

Quintin Balsdon

for helping extract the content from the original Twitter posts.

Created in Swift with Ignite.

Supporting Swift for Swifts