Design-For-All: Best Practices for Mobile Accessibility

When you design an experience that is mindful of diverse users' needs, the end result will ultimately be stronger for all. With new accessibility standards for mobile being released later this year, we wanted to share some best practices that we've championed.

The Myth of the Minority User

When working with clients, many times we’ve heard that designing accessibility is too time consuming and expensive. Stakeholders are often convinced people with disabilities are a minority, outside of their user group. But the fact is that 1 in 7 people around the World has some form of disability.

According to the 2012 Census Bureau study in the US there are 57.6m disabled people. Among them 19.9m have difficulty lifting or grasping objects, 8.1m are blind or have vision difficulties, 7.6m have hearing impairments and 15.2m have a cognitive, mental or emotional impairment. That means that, there’s almost as many visually impaired people living in the US as the entire population of New York City!

Comparison of number of people with disabilities in the United States

When talking about accessibility it’s important to also take into account seniors as well as those whose senses are temporarily or permanently impaired. Design standards that include accessibility adherence has meant that:

  • Millions of people, including those with disabilities can use technology to improve their quality of life, communicate and access information
  • The potential user group of any digital product is larger
  • A more inclusive design helps ensure a user experience that is excellent for all

Evolving existing standards to address the mobile experience

The current standard for designing web accessibility is a document by W3C called Web Content Accessibility Guidelines (WCAG) 2.0. It doesn’t cover native mobile apps specifically, but is more a general set of rules for web apps and websites. WCAG provides the foundation for many laws worldwide on the subject of accessibility. In the US, Section 508 Law mandates all technology used and maintained by the federal government to be accessible for people with disabilities. Section 508 requires conformance to the WCAG 2.0 Level AA that addresses the most common barriers for disabled. W3C is working to officially release a new version of the document WCAG 2.1. by June 2018 and current recommendations are extended to mobile design as well.

This existing documentation is very robust and detailed, so I’ve summarised below what I believe to be the most crucial best practices to follow when designing for an accessible mobile app. These suggestions are based on guidelines found in the WCAG 2.1. draft document already available online and Android accessibility guidelines.

1.Support Native Mobile Accessibility Features

The first step when designing for mobile is getting familiar with the native environment accessibility standards. Whether you’re designing for Android or iOS, you should read and understand their accessibility guidelines. Typically both operating systems provide some assistive technology such as:

  • Text size adjustments. Make sure to adjust your custom fonts to work when text size is enlarged
  • Touchscreen adjustments. Turn off touch controls and use only buttons or external input devices to see how the app works without touch control
  • Screen contrast adjustment
  • Screen reader (Voice Over on iOS, Talkback on Android)
  • Voice control

Understanding how screen readers work was essential when working on a Mobile Banking App that we designed and developed at FM. Each graphical element visible on the screen is simply a piece of code, and screen readers “read” only the code. The first step I took on this project was to evangelize accessibility to our development and QA team to ensure the code was screen reader friendly. Together we worked on ensuring appropriate UI elements labelling and grouping, and our QA team manually tested the apps with Talkback and Voiceover to ensure all elements were understandable and their purpose clearly indicated.

2. Be Obvious

Many people experience cognitive impairments like autism or dyslexia. They may have limited abilities to perceive complicated layouts, animated interactions and custom icons. Use obvious layouts to ensure your app is usable and operable. Use standard icons for elements in the navigation to prevent ambiguity. And here’s some advice for designers: if you can’t think of a meaningful icon in a 5 minute period, it means there’s no adequate icon to reflect what you seek.

3. Support Screen Rotation & Don’t Rely on Gestures

Many people use their tablets and smartphones fixed on a mount. As it’s impossible to predict what orientation someone prefers to use, it’s important that you don’t fix the screen vertically. It’s a good practice to design and test for both device orientations to accommodate the different usage scenarios.

Touchscreens have been invented to rely on touch and gestures, but for many people performing precise manual actions can be a challenge. When I tried to teach my grandma how to write messages on a smartphone, she wasn’t able to type on a regular display keyboard because the target letters were too small and close to each other. Thankfully she’s learned to send emojis! ☺

Here are some important design guidelines to follow here:

  • For target points use minimal size 48x48 dp, the larger the better
  • Enable using external input devices like a keyboard or a joystick
  • An app can’t rely solely on gestures. It has to be operable even if using only a tap gesture

4. Create Content that is Optimized for Mobile

Using smartphones often implies that the user sees shorter chunks of text and scrolls the content faster. Writing for a mobile audience is a hot topic, referring to a short and condensed style of writing that optimizes content consumption on a mobile device.

  • The copy should consist of short sentences
  • Actionable content should be clearly marked
  • The content should be sorted from the most important on top to the least important

Another consideration when creating content, is how easy it is to understand from a comprehension perspective. WCAG recommends that the text requires lower secondary education level or less. To measure how complicated is the text, use the Gunning Fog Index calculator. Text is understandable for a wide audience if the Gunning Fog Index result is below 12.

5. Make Everything Text

Content-rich apps that rely on media should always provide a textual description as an alternative. It could be either a full transcription of the video or audio or just a summary. The goal is to aid people with hearing impairments or those who can’t understand speech.

  • Add captions or transcripts to videos
  • Provide transcripts or summaries for audio
  • Describe images so that people using screen readers hear what it shows

6. Be Mindful With Colors and Imagery

People perceive colors subjectively, and everyone has their likes and dislikes. Relationships between color and optimal combinations can be measured digitally to benefit people with sight disabilities and to improve general legibility.

  • Color mustn’t be used as the only mean of conveying information
  • The recommended contrast of colors between text and the background is 4.5:1 (3:1 for text larger than 18pt). You can check contrast with contrast checker.
  • Avoid vibrating colors. There are some color pairings that pass WCAG contrast requirement, but are unpleasant to the human eye.

Mobile Accessibility is a Team Effort

Optimizing your digital products to ensure mobile accessibility requires more than simply optimizing the designs. To create a fully accessible app, it is a team effort:

  • Designers need to provide consistent, comprehensible and meaningful designs, that are not just beautiful
  • Copywriters need to write content with mobile screen size in mind - short, easy to read and understandable
  • Developers need to write accessible code - logical and well structured
  • Testers need to go beyond visual testing, and test with screen readers, external keyboard or a joystick. Testing products in real life with real people is even better still!

Further Reading

Most Read

1 Team health & the retro
2 How to fold QA into every sprint
3 Cooking with the right ingredients - what's your "Definition of Ready"?
4 Android build optimization
5 Why CSS Grid will drive the web forward

Working with startups from concept to launch

We understand that creating a product is a challenging and risky endeavor and believe that having a partner with experience and know-how is a critical first step.

Learn More

The Startup Journey

From idea to launch we guide you through the startup experience

Learn More