Improving your App’s Accessibility with iOS 11
Note: This article was originally published in Medium
Apple introduced iOS 11 at their World Wide Developer Conference (WWDC) in June 2017. WWDC is Apple’s showcase of new tools and developer APIs covering iOS, macOS, watchOS, and tvOS. In this post we’d like to show you what’s new in accessibility in iOS 11, and how you can incorporate these features to make your app more accessible to your users.
If it is your first time reading about Accessibility in iOS, Apple has a pretty good definition for app accessibility:
An accessible app is one that can be used by everyone — including those with a disability or physical impairment — while retaining its functionality and usability.
iOS 11 introduced some great accessibility improvements. Dynamic types are better supported throughout the system and bigger bolder fonts, which are easier to read, are now extensively used too. One of the ways they have done that is by adapting all the standard text style sizes to accessibility sizes.
In the past versions of iOS, only the Body style would get adapted. You can see in the screenshots above (iOS 10) and below (iOS 11) that there is a difference in how the app is rendered when using larger accessibility sizes. So don’t be surprised if your app does look different on iOS 11 for users using this feature, that is expected. Notice how even the Settings screen itself is much better adapted in iOS 11 too.
If you are using native iOS components in a standard way you will get lots of these improvements either ‘for free’ or with very little effort.
Larger Text
iOS 11 simplifies the adoption of larger accessibility sizes. If you are using one of the built-in text styles, you should get the new functionality without additional work. If you’ve checked the box in Interface Builder for ‘Automatically Adjust Fonts’, you’ll also pick up changes if the user changes their accessibility preferences in iOS Settings.
If you aren’t using Interface Builder and prefer to keep things in code, in the example of a UILabel called titleLabel you can use:
titleLabel.adjustsFontForContentSizeCategory = true
Oddly this isn’t the default option!
And if your app uses custom fonts? Good news again: iOS 11 provides the UIFontMetrics class to scale your font based on the user’s text size preference. For our titleFont UILabel it’s as simple as:
titleLabel.font = UIFontMetrics.default.scaledFont(for: customFont)
You can also map how your font scales to the default text styles by doing something like:
titleLabel.font = UIFontMetrics(forTextStyle: .title1).scaledFont(for: customFont)
Larger Navigation Elements
You may have noticed that not all elements in iOS adapt to font size accessibility settings. Such elements include the iOS Navigation Bar and Tab Bar — text sizes remain the same regardless of these settings. This is a conscious design decision from Apple to avoid taking up too much screen space. The good news is that in iOS 11, if you long-press Tab Bar icons, a larger version of the icon and tab name will show in the middle of the screen. The feature isn’t widely mentioned in WWDC videos, but it also works with elements of a UINavigationBar and UIToolBar as well. You can see this in the BBC News app in both our Tab Bar and the Navigation Bar of our built-in web browser (used in our ‘LIVE’ pages).
For it to work, you just need to add your Tab Bar assets in PDF format. Yes, it’s not a typo — Apple decided to use PDFs for vector-based images. When adding the PDF to your Asset Catalog in Xcode, simply tick the box for preserving the vector data of the asset.
If it’s not easy to get a PDF asset, you can still get the same effect with a larger PNG asset along with the following property on the UITabBarItem:
tabBarItem.largeContentSizeImage = image
Apple don’t have a specific size in their documentation, but 75x75 pixels for an @1x size seems to give a reasonable result.
Smart Inverted Colours
Have you ever tried the Inverted Colours setting on your iPhone or iPad? Some people find it difficult or tiring reading dark text on a light, bright background — Inverted Colours is an accessibility option from Apple designed to help.
The image in the left shows you how the BBC News app looks with the use of the Inverted Colours option before iOS 11. Light backgrounds and dark text are inverted, but images appear as if they are in ‘negative’ and are hard to see. The fact that you prefer or need light text over dark backgrounds shouldn’t come at the price of having an awful experience with images, so in iOS 11 you can stop inverting colours on UIImages with this property:
self.accessibilityIgnoresInvertColors = true
This allows the app to look like the image in the right, giving a much better experience. It also offers a pseudo-‘dark mode’ while we wait for official Apple APIs to support it, while iPhone X users may also get some improved battery life with their OLED screens!
And Much More…
- Dynamic spacing constraints: You can add dynamic spacings between baselines of labels.
headerLabel.firstBaselineAnchor.constraintEqualToSystemSpacingBelow(titleLabel.lastBaselineAnchor,
multiplier: 1.0)
- Scale images based on the large accessibility font types (you can use vector images for these too):
imageView.adjustsImageSizeForAccessibilityContentSizeCategory = true
- Inspect if the user is using a font size in the accessibility category. Useful to do changes in the UI to fit a font size that big.
traitCollection.preferredContentSizeCategory.isAccessibilityCategory
This post is the result of research carried out in the BBC News Apps team to improve the accessibility of our app. We hope to implement these features in the near future and are always aiming to offer a more accessible experience to all our users.
Hope you found this post useful, and please let us know about your experience implementing these or other accessibility features!
Resources
What to Read Next
Special thanks to Barry Kidney and Marta Marti for their help with this post.