Accessibility: what you need to know about mobile app development for people with special needs

Easy-to-Read Text

  • 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.
The example of how Roboto and San Francisco fonts are perceived by people with various vision disorders
  • 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.
That’s how Stark works
The plugin shows the acceptable rates in accordance with the WCAG 2.0
  • 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.

Simple Structure

  • 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.
VoiceOver
Larger Text
  • We kept buttons large enough to be clearly visible and easy to tap which 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.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rosberry

Rosberry

Rosberry is a mobile app design and development company based out of Thailand. We design, build, test, deploy and support apps at scale.