Accessibility: what you need to know about mobile app development for people with special needs
By Anastasia Egorina, UI/UX designer at Rosberry
Mobile technologies are developing in leaps and bounds changing the world around. So it’s no surprise they are now used in educational and rehabilitating programs for people with special needs based on accessibility. The whole thing seems pretty basic now, yet we have no doubts its future is bright. That’s why we could not miss the chance to try and contribute to the movement.
Last year our company was invited to deliver an iOS mobile app for people with special needs called DIY (Do It Yourself). The project was initialized by The Home Modification Information Clearinghouse (HMinfo) within the Faculty of the Built Environment at UNSW.
The key idea of the app is to help elderly people and people with special needs modify their home environment in accordance with their specific needs which are: vision problems, motor disorders, and dyslexia (a specific learning disability in reading).
Most of modern mobile apps are poorly adapted for use by disabled people. So it’s been nothing but a challenge for us to do this project. iOS has special Accessibility features built in, however to make them work properly the app interface should meet the following requirements:
Since the app users have obvious issues with image and video content perception, it was a logical decision to represent most of in-app information (up to 80%) textually.
There are some important rules how to execute text information for people with vision problems:
- The goal is to make text as readable as possible by choosing right font size and color. We used large bold font and high contrast color.
- Also, when choosing a font one should consider perception specifics of characters with complex structure (a, e, o, u). Their glyph should be easy and unambiguous to perceive.
One should never underestimate the importance of font choice as it really influences the whole app experience and, thus, accessibility. Roboto, our font of choice you can see in the app, is actually pretty good in terms of accessibility. However, it’s still recommended to use San Francisco which is an iOS system font mostly because it’s dynamic and easy to read.
- It’s known that people suffering from colorblindness has a limited perception of color spectrum which means colors don’t carry enough information and to ease its perception one should rely on colors intensity not colors themselves.
To make the app perception easier it’s recommended to enhance the interface contrast. In accordance with the Web Content Accessibility Guidelines (WCAG) 2.0 the background and foreground color should be contrast enough to be both seen on monochrome screen and by people with limited color perception.
The contrast ratio should be no less than 4.5:1 (a black and white image has a maximum contrast ratio of 21:1). We used two tools to check the app conformity with the requirement::
- We also used Display Accommodations feature which makes it possible to invert colors, adjust white balance, display only shades of grey, and apply color filters to ease the perception of display for users with all kinds of color blindness and other vision disorders. The feature comes in handy and works pretty well in our app.
It’s also advisable that one follows a simple style to keep text information easy to comprehend. We made all text blocks in the app short and clear to provide a seamless integration of text content and VoiceOver, a feature for screen reading enabling to use a device even by those who can’t see the screen.
- It’s also strongly recommended to add icons, illustrations, or audio files to the text to enhance its perception by disabled people. For instance, people with different degrees of color blindness can’t really perceive colors adequately as well as hyperlinks and buttons simply highlighted in color. To solve the issue we have added icons to some of interface elements.
Complex multilevel interface may be a real issue for disabled people, especially for those with vision and motor disorders. That’s why it’s so important to keep it simple and consistent.
- To ensure seamless operation of VoiceOver and Speak Screen (which is pretty much similar to VoiceOver) within the interface we turn screens into one-dimensional list.
- We also decided to go without scroll as it tends to hide the part of information which is out of screen space. Instead of scroll we chose to divide the information into several screens. Thus, VoiceOver offers to go either to the next screen or to the app menu right after the actual screen is read, yet each screen contains a complete piece of information.
To scale a font with no design damaging we used Larger Text feature.
- We kept buttons large enough to be clearly visible and easy to tapwhich is really useful for users with motor disorders. To add even more accessibility we also used Assistive Touch which is a special feature to adjust touch sensitivity of a display. To make it comfortable for a user to tap on buttons we followed the rules that buttons should be min 9 mm both high and wide and there should be enough free space around them.
- We kept the animation minimal since fast screen blinking is not safe for people suffering from photosensitive epilepsy — flashes of 4 to 59 Hz frequency range are strongly prohibited. For users sensitive to motion effects, we chose to replace regular swiping animation with the flow effect when listing screens.
The list of features above is minimal yet essential to design a mobile app for people with special needs.
Development of mobile apps for disabled people absolutely requires a special approach. It’s necessary to bear in mind relevant guidelines and strictly follow them throughout the whole delivery process.
The team of ours had to investigate the matter from scratch and discovered the iOS Accessibility features to find out they come in really handy for developers.
What we want to attract developers’ attention to is the real need to create more original apps for disabled users and adapt the ones already existing on the market in terms of their specific needs.