An estimated 285 million people worldwide are visually impaired; 39 million are blind and 246 million have low vision. If you’re a member of a digital product team hoping to build for the widest range of abilities, your team must ensure that visually impaired users can successfully utilize your products.
Thinking about designing for the visually impaired seems like a daunting task, but by following accessibility best practices, you can make great progress toward designing an accessible mobile app experience. It’s important to make sure that websites are accessible as well, and there are many places you can read about web accessibility, starting with the WCAG Guideline.
“285 million people worldwide are visually impaired. We need to make sure we’re designing for them.”
In this post, we’ll focus on accessibility best practices for mobile apps because, while we have years of documentation and many laws related to accessibility on websites, mobile apps are still relatively new, and the full implications of mobile aren’t implicated in the WCAG. For that reason, many developers and designers remain in the dark on how to make apps accessible—despite smartphone platforms providing tools to help with building accessible experiences.
You may be thinking to yourself, “Do visually impaired users use my app? Is it worth it to invest the time to make my app accessible?” By making your app accessible to visually impaired users, you’re benefiting not only the visually impaired, but all your users.
Every day we use inventions and spaces meant for the disabled but are now enjoyed by all. A popular example of this is curb cuts, which were initially fought for by wheelchair users to be able to get on and off sidewalks. However, today these curb cuts are used by not only people in wheelchairs but also parents with strollers, grocery shoppers rolling heavy carts, or the traveller rolling luggage at an airport. In this same way, making your app accessible can benefit all users, not just those with disabilities.
When talking about vision impairments, think about 2 different types of users: those with low vision and those with no vision. While both of these users fall under the category of “visually impaired,” they have very different needs.
In this post, I’ll discuss the needs of low-vision users. Then, you can read about best practices when designing mobile app experiences for blind users on the WillowTree blog.
“Making your app accessible to visually impaired users benefits *all* your users.”
Low vision
The causes for low vision are many, ranging from farsightedness, to cataracts, to degenerative eye conditions, to simply losing vision due to old age. Despite the many kinds of low vision, we can design to meet these users’ needs in a few simple ways which will benefit all users, regardless of ability.
Dynamic Type
Make sure your designs account for and support Dynamic Type. This is the simplest and arguably most common way you can make your app accessible for low-vision users. In the OS for almost all devices, the user can change the text size to be larger. For users who change the OS font to be larger, downloading an app that doesn’t allow Dynamic Type can be discouraging and could prevent users from being able to use your app at all.
Contrast
Ensure proper contrast. It is easy to assume that everyone who uses your app is a millennial with 20/20 vision—but this is far from the truth. It’s easy to design something beautiful, but inaccessible and unreadable.
Put in a little extra work to make sure that colors, typography, and visuals are legible and readable to all users. A great way to quickly check this is by going to Materio.io/color and clicking the Accessibility tab. It will let you know whether your colors, font sizes, and opacity are legible and readable before you actually start designing. If you use Sketch then you should also download Stark, a plugin that allows you to check the accessibility of your designs directly from Sketch.
“Make sure that colors, typography, and visuals are legible and readable to all users.”
Use of color
Don’t depend on color alone to convey messaging. Red is bad, green is good—we assume this is a universal truth. But for users who are visually impaired or colorblind it can be difficult to detect color changes on the screen. To prevent this, make sure you convey messages by using more than color. This is also important to think about when your apps are meant to be used in other countries because different cultures interpret colors differently.
Also, if you’re designing an app meant to be used across multiple countries or areas, localize your labels and content for those areas. In America, for example, “Got It” is a common label for buttons but may not make sense in different parts of the world.
The example below shows Google’s error state for an incorrect password. The line becomes red, but an error message also pops up. This message can be seen by someone who is colorblind and also zoomed in by someone who is visually impaired.
Dark mode
Implement a night or dark mode in your apps. This is especially important if you have an app with a lot of text content. It’s much easier for low-vision users to read light text on a dark background than the traditional dark text on a light background. Recently Apple released iOS 11 which has a “Smart Invert Colors” feature. This feature only inverts the UI, which means that images and app icons stay in their original color.
If you’re designing an app for Android, you’ll still have to implement a dark mode; if you’re designing for iOS devices then be sure that your developers are considering compatibility with the new Smart Invert Colors feature and that you’re thinking about how your icons and other images will look in the inverted mode.
These basic tactics for benefiting low-vision users will help not only them, but all your users. All of these features—Dynamic Type, contrast, use of color, and dark mode—not only help users who are vision-impaired, but also “typical” users who may be reading on their phone at night or want to give their eyes a break from squinting at small text.
Read more about accessibility
by Ayesha Zafar
Ayesha is a Senior Product Researcher at WillowTree, Inc. She enjoys doing user research and working towards making apps more accessible for everyone regardless of ability. She is a board game enthusiast—Avalon is her favorite.
