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!
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!