How to increase Accessibility of the Application?
What is accessibility?
Accessibility is a way that makes your product more accessible. It defines the quality of the work you do for your app. Probably most of us have heard about those features but haven’t thought about using them a lot. Accessibility features can be VoiceOver, increased text size, etc. As we read in Apple’s Human Interface Guidelines, “Approximately one in seven people worldwide have a disability that affects the way they interact with the world and their devices.” So, using accessibility features is not just a nice to have for our product. It should be something that can measure the quality as well.
Talking about applications with a broad scale, such as mobile banks. Those applications have hundreds of thousands or even millions of users. The necessity of accessibility features raises alongside the scale of the product. When your product has so many users, there will be more people, that will have issues with working with your application. Some of them might even find it impossible to interact with your app. Nowadays, it might become the reason for legal risks for the app’s publisher as well. Therefore it’s not “nice to have”. It’s a must to implement and improve accessibility features in our products.
The importance of accessibility is well known for both iOS and Android platforms. Therefore they have made it relatively painless to use those essential features with ease.
How to increase accessibility in your app?
Let’s talk about making your app visually accessible.
When we are working on projects, we don’t always have UI/UX teams to help us build apps that will be visually accessible. Therefore there are some tips from WWDC that will help us on our journey to accessible apps.
Color and shapes:
When we think of making particular items stand out in our views, we mostly choose different colors for them. This is not a great thing to do, as people might find it difficult to differentiate colors. The shapes are the tools that might help us make items stand out alongside colors. Taking Tab bars as an example, we mainly highlight the parts of the tab bar with different colors to indicate the selection of relevant items. But enabling accessibility features can add shapes around those items. And even tho those shapes are not perfectly visible, from iOS 14, it is available to provide an alternate appearance for those button shapes.
To make your app more friendly with high contrasts, there is a way to add the symbol for high contrasts. Go to XCode, open Assets.xcassets, select the asset of your choice, and in the inspectors, you will see.
Selecting High Contrast in Appearances will give you an extra option for the assets catalog.
XCode’s journey in contrasts is not ending there. It has a Color Contrast Calculator that gives the contrast ratio of colors.
Xcode -> Open Developer Tools -> Accessibility Inspector
Window -> Show Color Contrast Calculator
This calculator gives the ratios and the tips if those color contrasts match and whether they should be used for different text sizes or not.
In that case, we can see the ratio 6,6:1 and green checkmark, indicating that those colors pass the tests for any text size.
In that case, we have a 2,8:1 ratio, which is too low, and therefore the tests are not passed, and we get a proper message “Fails for all text sizes.”
Text Readability:
Implementing accessibility features in your app is painless in the first steps of development. Texts are essential parts of our applications, and there are several things that should be considered
- Design with large text in mind
- Wrap labels instead of truncating text
- Symbols and glyphs should scale with text
The function “traitCollectionDidChange” allows us to catch an event of changes in font accessibilities. According to those changes, applying different font sizes or changes in layouts of your UI are the quick tips to boost accessibility.
Display preferences:
We might have often used UIVisualEffect and mostly UIBlurEffect. They look and feel unique, but there might be issues when Reduced Transparency is on. While using blur effects, there might be some colors on the background that will raise issues with text readability. Enabling Reduced Transparency turns blur effects into single, solid colors, which makes a text more readable. The good thing about this is that UIAccessibility provides API to check whether the Reduce Transparency option is enabled or not. It’s up to you how you accommodate those changes, but your app will leave a great experience for most of the users as long as you do.
Conclusion
Accessibility is an essential part of a quality product. As the scale of the app grows, so should be the accessibility features as well. There are lots of ways to boost the accessibility of the application, in this article we have covered using shapes to make some items stand out. Use Bold Texts for better readability and system colors for dark and light mode supports, as well as support for different contrasts. Implementations of those features are quite light at the first steps of the app, with the help of Apple’s APIs and XCode’s tools.
