Are you interested in improving your app’s accessibility support? I will share with you 10 easy tips and tricks to help you and provide you with a starting point for including accessibility support in your app.
In the first part of the article, you have learned that the term ‘accessibility’ covers four main areas: Vision, Auditory, Motor and Learning & Cognitive.
Now that you have a better understanding of the interaction of some of your users and their mobile devices, let me introduce you to 10 tips and tricks to make your app more accessible.
In this story, I’ll be mainly focusing on the iOS accessibility features – there are similar tools and features available on Android. If you want to get a good overlook of all the Android accessibility features, check out the Android Accessibility Guide as well.
Why is it important to have a high colour contrast ratio? As I have mentioned in the first part of the story, there are plenty of people with vision impairments e.g., colour blindness. Even such a simple thing as an imperfect viewing environment (bright sunlight) makes it hard to see everything on the screen.
In order for your users not to have a hard time using your app, you should use a minimum colour contrast ratio of 4.5:1 for normal text and 3:1 for large text. Large text is 14pt (bold) or 18pt (non-bold). You can test the colour contrast ratio of your user interfaces with Apple’s built-in accessibility inspector, which is provided as part of the developer toolkit.
Dynamic Type allows the user to size up (or down) their preferred font size so the app can adjust accordingly. Together with auto layout rules, your app can look exactly as you expect it to look, with any font size your user feels comfortable with.
If we take a look at the Apple App Store Application, you'll see that as soon as you size up the preferred font size, the layout will adjust to the bigger font.
To support Dynamic Type, one needs to:
Use system font and text styles or include a scaled instance of the custom font and then apply a text style.
Set the adjustFontsForContentSizeCategory to true for all text elements.
Use Auto Layout so text can wrap and expand its container.
I bet we all have liked someone’s picture on Instagram by accident, because we only wanted to inspect who double-tapped it. Awkward, right? If you don’t want to put your users in this position, make sure they don’t have to tap tiny buttons.
Resolve this problem by adjusting the size of your tap targets to at least 44x44 pts. That’s approximately the size of a human fingertip. To make sure that your users never end up doing the wrong action unintendedly, place your tap targets at least 32 pts apart. This target size is especially crucial for users with low vision and motor impairments.
You should not stop building fancy custom elements. However, one should consider using the standard UI elements before building their own custom elements. Accessibility features are available out of the box with standard UI components. What this means is that controls have the correct traits for VoiceOver and all the navigation gestures are in place. Moreover, your users are already accustomed to these standard features. If you are building custom elements, please make sure they are as accessible as the platform standard version.
Let's try something different now: Imagine you have very poor, or no vision. You've just downloaded a new food delivery app and opened it for the first time. Now, you're prompted with a login screen. After entering your email address and password, you tap the login button. Nothing happens, you are still on the same screen.
What you don't know is that you have a typo in your email address. A user with full vision will see that the text colour of the given email address changed to red. The designer of the screen obviously forgot about visually impaired users.
By changing the colour of the given email address, the designer used only one mode of communication. As we now know, that's not enough. You can improve this screen and use two modes.
As soon as you tap the login button, not only does the text colour change, but there's also an error message displayed below the text field. Now there is a colour change AND a content change. Great, but still not perfect. How should you, as a visually impaired user, know that an error message appeared?
A good addition would be to add VoiceOver support. So, if a VoiceOver user enters invalid data, VoiceOver should read out: “Unable to submit! Invalid email address.” Congratulations! Now there are three modes of communicating information.
So why should you use multiple modes? You can’t be certain which way of communication each of your users prefers. Using colour changes only is not enough, your user might have low vision, be colour blind, or completely unable to see the screen. It is important to use multiple modes when communicating valuable information. An easy way to accomplish this is by pairing modes. Always pair your visuals with audio and use colour and content placements for the visuals. Also, consider adding haptic feedback and the announcement of information via VoiceOver.
This might seem obvious to you, but one can find a lot of apps where fancy text is displayed on an image. A good rule of thumb is to sort your images in the following three categories. If your image fits one of the categories, don't display text on it.
Image is provided by your users (e.g. Instagram)
Image conveys information (e.g. tab bar icon)
Image is only decorative (e.g. logo)
If you’re not convinced yet, please consider that by displaying text on images, VoiceOver won't be able to read out the text. The text size won't increase (even though you support dynamic type), and last but not least, the text won't be localized.
Apple’s development tools come with very helpful software called the Accessibility Inspector. The Accessibility Inspector can audit every screen in your app and gives you a list of accessibility issues which you should fix. Don’t worry, the Accessibility Inspector provides some helpful tips for every issue found.
Another important step in improving your app’s accessibility is testing it with VoiceOver. Before you start testing your app with VoiceOver, you need to learn how to use it. These are the most important gestures:
Swipe or slide with your finger to move the cursor.
Double tap to select an item.
3-finger swipe to scroll on the screen.
Once you've practiced your VoiceOver skills, you're ready to test your app. Here’s a little guide for a test scenario:
Are you able to:
Navigate everywhere in your app?
Tap every tappable item?
Hear every bit of text?
Hear every image that conveys information?
In most cases, you only have to make an adjustment for VoiceOver to interpret your elements correctly or mark an element as an accessibility element if VoiceOver is ignoring it. These two fixes won't cost much time but will vastly change the experience for your visually or motor-impaired users.
Generally speaking, an easy and simple UI is better than a confusing one (e.g., Snapchat). What I mean by that is, if your UI prefers navigation over complexity, you're doing your users a huge favour! By using this design, you avoid clutter and often confusion. Another thing to consider is keeping your colour scheme simple, not to overwhelm your users.
Why is a simple UI so important? With simplicity, you consider those of all abilities and ages. Speaking of all abilities, someone with cognitive disabilities or a VoiceOver user will struggle if your UI is complex and confusing. In the worst case, the user will be frustrated and stop using your app. Same goes for the colour scheme, stick to it and keep it simple!
Gestures are fun and unique, but please consider that they must be taught and discovered. Learning gestures takes time, memorization and sometimes additional dexterity. Furthermore, custom gestures in particular aren't consistent across different apps. If you want to use gestures, think of them as an extra thing, as the cherry on-top.
Gestures should make things easier and help users save time. When implementing gestures, there should be a simple alternative to do the same thing without using a gesture. In order to prevent unexpected behaviours, one should never trigger any destructive action with a simple gesture without asking for user confirmation.
Why do you have to be careful with gestures? Think about VoiceOver, which is gesture driven. There is a chance that your gesture conflicts with a VoiceOver gesture. Some gestures even have a custom VoiceOver version. In addition, complex gestures can be a challenge for people with motor issues. They could trigger a gesture by accident or have difficulties completing complex gestures.
The final and probably most important tip for you: Talk to your users! In many cases, we aren’t in contact with someone who is visually impaired, has low vision, difficulty with hearing or experiences motor impairments.
If you are lucky, you are able to interact with someone who is willing to inform you how their disability relates to UX. You can use this chance, talk to them about their experiences and learn how they interact with their phones.
The best way to reach all users is to provide a way for them to contact you, if they find any accessibility issues. This can be via Twitter, e-mail, Instagram...whatever fits with your user group. It is helpful to be in contact with people. They know what they need and only they can help you make your app better.
Make it easy for your users to contact you. Be an advocate of accessibility.
Now you have all the tips and tricks to make your app more accessible. I know it seems a lot at first, but if your resources are limited, please focus on the last point. What I would like you to take away from this article is that you create the content. It’s your users that decide on how they want to see it, but it's your job to make sure that everyone can enjoy your app.
Want to expand your knowledge even more? Click and check out the advantages of hybrid apps.