As of midyear 2020, 20 percent of ADA digital lawsuits in federal court claimed apps were inaccessible. This unfortunate trend demands better resolution. More than ever, people are logging on less and relying on apps more—including people with disabilities. However, companies have been slow to catch up, not realizing that apps, as well as websites, fall under the ADA.
In the world of accessibility, mobile applications are often pushed to the back burner by companies and app owners, even as usage and engagement on mobile is soaring. According to Pew Research, 37 percent of Americans primarily use mobile devices to connect to the web, and almost 20 percent of Americans own a smartphone but do not have broadband internet at home. Yet, the first—and sometimes only—digital asset that organizations address for compliance is their website.
Apps don’t have a comprehensive standard for accessibility like the web does with the Web Content Accessibility Guidelines (WCAG). Unfortunately, companies are still being sued for inaccessible native apps, and the problem isn’t going away as more users turn to apps for their daily digital interactions. The following mobile app accessibility checklist can help organizations easily factor accessibility into their iOS and Android app projects, but first:
Why Mobile App Accessibility Is Important
Mobile accessibility generally refers to making websites and applications accessible to people with disabilities who use mobile phones and other devices to access content. This content could be delivered across devices other than mobile phones and tablets, including:
- Smart TVs
- Connected vehicles (Android Auto)
- Seatback screens in taxis and airplanes
- Connected appliances and other smart home technology
Mobile application accessibility especially matters because of the ways users interact with content. Native apps—software directly installed onto a device out of the box—drive engagement, boost customer loyalty, and give brands more options for personalization of their experiences, so the implications of providing an inaccessible experience might be magnified. Some estimates show that 90 percent of time spent on mobile devices occurred within native applications. This trend points to an urgent need for a smarter approach to app accessibility.
6-Step Checklist to Achieve Mobile App Accessibility
This mobile application accessibility checklist details six inclusive design best practices for native apps. We’ve aimed to distill the most critical elements that a native app designer or developer should focus on to ensure accessibility and usability.
1. Design for Varying Screen Sizes
Smaller screens and custom aspect ratios are hallmarks of mobile devices; designers need to account for them when building native apps. A smaller screen limits how much information people can take in at one time, especially when users need to magnify content due to poor vision.
Tips for helping users make the most of small screens include:
- Minimizing the amount of information on each page (compared with a desktop or laptop) by providing a dedicated mobile website or designing the site responsively
- Providing a reasonable default size for content and touch controls to minimize the need to zoom in and out for users with low vision
- Adapting the length of link text to the viewport width
- Positioning form fields below, rather than beside, their labels
2. Focus on Touch Targets and Placement
Higher resolution in mobile devices allows for multiple interactive elements to display together on a small screen. But these elements must be large and distanced enough so that users can easily target them by touch.
Tap targets within an app should be big enough for people to interact with precision and confidence, even when they have to perform tasks in a hurry.
Best practices for touch target size include:
- Designing touch targets to be at least 9 mm high by 9 mm wide
- Adding inactive space surrounding smaller touch targets (closer to minimum size above)
Mobile applications should also position interactive elements where they can be easily reached regardless of how the device is held. Developers should consider how an easy-to-use button placement for some users might cause difficulties for others (e.g., left- versus right-handed use, assumptions about thumb range of motion).
Tips for touch target placement include:
- Place buttons where they are easy to access.
- Allow flexible use for all interactive elements.
3. Keep Device Gestures Simple and Provide Ample Feedback
Most mobile devices are designed to be operated primarily through gestures on a touchscreen. These gestures can be simple (such as a one-finger tap) or complex (involving multiple fingers, multiple taps, and drawn shapes).
Gestures used to control native apps should be as easy to execute as possible. Complex gesture control can be particularly challenging for users with motor or dexterity impairments. Create alternatives to allow simple tap or swipe gestures in place of more complex ones.
In addition to simpler gesture control, native apps should be designed so that users can easily go back and fix their course in case of unintentional actions such as accidental clicking. For example, if a user swipes their finger on the wrong part of the application, they should be able to easily go back and access the correct interactive elements.
Customized gestures are sometimes used as an effective replacement for annoying confirmation dialogs. Users with disabilities may still benefit from these actions, so app designers should implement them as an alternative feature.
4. Ensure Consistent Layouts and Templates
Components that are repeated across pages in a mobile application should be presented in a consistent layout. In responsive web design (in which components are arranged based on device size and screen orientation), webpages in a particular size and orientation) should be consistent in where they place repeated components and navigational elements.
For example, a native application has a logo, a title, a search form, and a navigation bar. At the top of each page, these elements appear in the same relative order and position. When the app is viewed on a smaller screen in portrait mode, the navigation bar collapses into a single icon with a drop-down list, but the elements in that list are still in the same order.
Consistency is key to creating seamless cross-channel user experiences. It helps the user feel comfortable and in control while executing tasks, including those that may start on one device and finish on another.
5. Provide Easy Methods for Data Entry
Multi-modal data entry is another hallmark of mobile devices and native applications, in which users can enter information in various ways, including the on-screen keyboard, a bluetooth keyboard, and speech. Text entry can be time-consuming and difficult for some users, but it can be displaced through other data entry styles. Reduce the amount of text entry required by providing select menus, radio buttons, or check boxes, or by autofilling known information (e.g., date, time, location).
Typing is a slow method of data entry. Providing alternatives such as autofill, data sharing between apps, or dictation improves the overall app experience and prevents errors.
6. Double-Check Color Contrast
WCAG outlines general color contrast ratios that are acceptable for most users, but extra attention must be paid to mobile devices and applications. Mobile devices are more likely to be used outdoors, where glare from the sun could impact ability to see the screen. Using good contrast is important for all users; bad contrast can compound the challenges that people with reduced vision have when accessing content on mobile devices.
Text legibility is preserved by an adequate contrast between the font color and the background. For WCAG 2.1 AA compliance, text should have a color contrast ratio of at least 4.5:1 (larger text at least 3:1). Allowing different contrast ratios for larger text is useful because wider character strokes are easier to read at a lower contrast than narrower character strokes. This allows designers more leeway for contrast, which is helpful for elements such as titles. But because app content is viewed on smaller screens and in different conditions, this allowance for lessened contrast on large text becomes complicated.
Executing Accessible Native App Design and Development
As you execute your accessibility strategy, be sure to keep both website and application channels in mind, and implement the best practices shared here regarding screen size, touch targets, mobile gestures, layout consistency, data entry, and color contrast.
On May 12th at 11 am ET you can join Senior UI/UX Designer, Luca Boskin, their Head User Tester, Joseph DiNero, who is blind, and Jason Taylor, Chief Innovation Strategist at UsableNet on a Webinar, "Inclusive ADA Principles for Mobile App Accessibility."
Space will be limited, so save your seat now.