Mobile App Accessibility: The 6-Step Checklist

By UsableNet on Apr 22, 2024
Topics: Web Accessibility, Mobile Apps

0 Comments

This blog was originally published in August 2020 and updated in April 2024. 

Mobile app accessibility generally refers to making native applications—programs installed directly on your device and that you don't need to access through a web browser—accessible to people with disabilities who use smartphones and other connected devices to access content.

These apps aren't limited to apps you might download from the App Store or Google Play to your mobile phones and tablets.

They can also include apps on: 

  • Smart TVs

  • Connected vehicles (Android Auto, and Apple Car Play)

  • Wearables (Samsung Galaxy Watch, Apple Watch, Meta Smart Glasses)

  • Seatback screens in taxis and airplanes

  • Connected appliances and other smart home technology

Ensuring these apps are accessible can make an incredible difference for members of the disability community

Why is Mobile App Accessibility Unique?

Compared with traditional websites, native apps give brands access to:

  • Better personalize customer experiences. The user experience on mobile apps is more closely tied to a user's account and device context. 

    This gives brands more data to personalize the buying experience through related product recommendations, one-click reordering of previously purchased products, notifications about products of interest, and more. 

  • Higher customer engagement. The natural result of more personalized experiences is higher customer engagement. Content isn't "the same for everyone" but tailored to each user.  

  • Increased customer loyalty. Human beings are creatures of habit. When a user has a pleasant and frictionless buying experience on an app, they're likely to try that app again next time. 

If that weren't enough, a recent report found that US app market revenue reached an all-time high in 2023 of $44.9B

The power of mobile apps makes it all the more important to get app accessibility right. 

However, companies have been slow to catch up, not realizing that apps fall under the ADA just like their websites do. 

Mobile App Accessibility and lAWSUITS

As of this writing, apps don’t have a comprehensive standard for accessibility like the web does with the Web Content Accessibility Guidelines (WCAG).

Despite this, companies are still being sued for inaccessible native apps, and the problem isn’t going away as apps continue to grow in popularity and capture more attention of plaintiff law firms.

For example, 25% of the 4,600 digital lawsuits filed in federal court in 2023 targeted a company that had been sued previously. Often, the second lawsuit targets the organization's mobile app accessibility.

tHE Mobile App Accessibility 6-Step Checklist

This mobile application accessibility checklist details six inclusive design best practices for native apps.

We’ve aimed to distill the most critical elements for a native app designer or developer to focus on to ensure accessibility and usability.

Learn inclusive ADA UX mobile app accessibility principles. Download our guide. 

 

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 view at one time, especially when users need to magnify content due to poor vision.

Help users make the most of small screens by:

  • Minimizing the amount of information on each screen (compared with traditional desktop or laptop design). This practice doesn't benefit only apps: the accessibility of your website can also benefit from mobile responsive design or a mobile version of the site.  

  • 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 multiple interactive elements to be displayed 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 quickly.

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 the 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 can 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 that 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 using simple tap or swipe gestures instead of more complex ones.

Users should also be able to easily go back and make different selections in case of unintentional actions such as accidental clicking. For example, if a user swipes their finger on the wrong part of the screen, it should be simple to 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 repeat across screens in a mobile app should be presented in a consistent layout, with the same components and navigational elements appearing in similar locations and orientations across the app. 

For example, a native app typically has a logo, a title, a search form, and a navigation bar. At the top of each page, these elements should appear in the same relative order and position. When the app is viewed on a smaller screen in portrait mode, the navigation bar might collapse 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

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.

Typing can be slow and difficult for some users, but developers have a few ways to reduce the text entry required. Consider providing select menus, radio buttons or check boxes, or by autofilling known information (e.g., date, time, location). 

Data sharing between apps and dictation also improve the overall app experience while helping prevent errors.

6. Double-Check Color Contrast

WCAG outlines general color contrast ratios 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 users' ability to see the screen. Bad contrast can compound the challenges that people with reduced vision have when accessing content on mobile devices.

The legibility of text is achieved by having adequate contrast between the font color and the background.

For WCAG 2.2 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.

Achieving Accessible Mobile App Design and Development

As you launch your accessibility strategy, keep your website and mobile application channels in mind.

Implement the best practices shared here regarding screen size, touch targets, mobile gestures, layout consistency, data entry, and color contrast.

Connect with a member of the UsableNet team to learn more about how we can help you solve for accessibility.

Text stating, "make your content accessible to everyone" with illustration of people using website pages

UsableNet

UsableNet

Founded in 2000, UsableNet created some of the first tools and platforms to make websites accessible and usable for all people. Starting out, we worked with government agencies as well as universities and corporations. Today, accessibility has become important to almost all companies. We provide accessibility solutions to Fortune 1000 companies, small and medium enterprises, government, and education organizations across industries including retail, travel, hospitality, food services, automotive, financial services, and healthcare.

Need to improve digital usability, accessibility or performance? We can help.
Partner with us. Get in touch.