Designing Mobile Apps for Everybody
Before becoming a developer, I taught sixth-grade students with a variety of physical, emotional, learning, and developmental disabilities. Each one possesses the legal right to access the full depth of the curriculum — and I had a legal and moral obligation to make that happen. Did it require extra time, research, and effort to meet every students’ needs? Yes. Was it anything compared to the frustration students experienced if their educators didn’t make that effort? No.
The experience of repeatedly being unable to access material puts students at risk of completely disengaging from educational experiences altogether. Thankfully, what initially seemed like a big lift or “extra work” became the new normal of the base expectations of what it means to deliver content.
Designing mobile apps for the broadest possible audience is no different. It will require research on how to best serve people in bodies different from our own. The stakes are just as high — interacting with a product that was designed without you in mind can be alienating, frustrating, and can force long-term disengagement.
What follows is a non-exhaustive list to get started in building mobile applications that will serve the broadest possible audience.
- Make universal design the standard, not the ideal.
- People with disabilities are the experts on accessibility, so seek out their stories. You can start by going to Twitter and searching for the #A11y hashtag to join the conversation about accessibility issues on the web. You’ll find a multitude of examples of great accessibility, as well as personal frustrations with inaccessible design.
- Don’t assume you know who is or isn’t using your app, and don’t assume you know how users interact with your app. For example, blind users may not rely solely on voice-to-text — they may use the on-screen keyboard, an external keyboard, or braille display.
- Use UI controls that are built into the programming language. In the same way we should strive to use validated and semantic HTML as much as possible when designing web applications, the standard UI controls are accessible to other accessibility tools. Furthermore, since users are already familiar with their mobile device’s controls, they know what to expect when interacting with the controls, and don’t have to learn any new controls unique to your app.
- Allow users to resize your app’s content, and consider what the content will look like when resized. People with low vision or visual impairments may need larger text, and resizing your app may require more horizontal and vertical scrolling.
- Don’t use colors to indicate meaning or purpose. Not only will your mobile app have users with limited or no sight, 4.5% of people have some form of colorblindness. Using red to indicate an error message, for example, will not send the intended meaning to users who cannot perceive color differences. Icons, patterns, textures, and bolded text are some design elements that can help colorblind users glean meaning, and descriptive button and link naming will help all users intuit how to interact with your application.
- Use a high-contrast color palette. W3G recommends that a contrast ratio of 4.5:1 is the minimum acceptable ratio for larger text, while 7:1 is best for smaller text. You can find accessible color combinations with Tanaguru Contrast Finder.
- Make clickable elements at least 9mm by 9mm (regardless of screen size) and surround them with inactive space. Not all users have the hand mobility to tap a button, and some users don’t use their hands at all, but special styluses like mouth styluses and wrist-mounted styluses.
- Test, test, test. If you don’t have the ability to find a user with a disability to test your app, test it yourself. Turn on VoiceOver (iOS) or TalkBack (Android) and try to navigate without seeing the screen. Can you use your application with an external keyboard? Seek out accessibility testing tools and make it part of your testing process.
- Read the W3G’s Web Content Accessibility Guidelines. The guidelines are meant to include considerations for “people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.”
