How to Incorporate Accessible Design Elements into Mobile Apps

July 11, 2022

Accessible design is normal design. So the designers and developers of mobile apps should not draw a line between accessible and normal or usual design. Most people are likely to experience some form of disability—either temporarily or permanently—at some point in their life. Plus, we all make use of accessibility features at times—even if we don’t think of them in that way. If you’ve ever used your mobile device’s operating system in dark mode, zoomed or adjusted the size of text in a Web browser, or dictated text into Siri, you’ve benefited from your device’s accessibility features.

Designing accessible apps just means designing them so all users can navigate their user interface comfortably and easily—just as for any mobile app or Web site its navigation system and content must be in a logical order. In this article, I’ll share a few things you should keep in mind when designing for mobile accessibility.

Champion Advertisement
Continue Reading…

Common Front-End Mistakes

The most common mistake for any accessibility-related development work is assuming that all users are just like us. UX designers and software developers naturally approach problems coming from the context of our own lived experience. While that’s a fine starting point, it cannot also be the ending point. Getting features to function properly when users take the happy path might already require a lot of work, but we must pause to think about how the unhappy path looks.

It’s important for mobile design and development teams to conduct usability tests and have conversations with a broad variety of actual users, who offer a different perspective. The more you get in the habit of conducting UX research, the more you can start breaking down the assumptions, habits, and biases that your team has unintentionally adopted and start thinking about what-ifs and what-abouts earlier in the design and development process.

Starting with Squeaky Clean, Semantic Markup

We do not always have the luxury of a pure design phase. Most of the time, we have a rough idea of the product requirements and the user interface (UI) shakes out during the process of creating the HTML markup.

However, employing user-interface elements appropriately for Web browsers can be the most powerful thing we can do to make apps more accessible. Keep mobile devices’ native behaviors, animations, and responses in mind when designing and building Web apps.

Although these are not strictly accessibility concerns, if an app or Web site doesn’t behave as users expects it to on their device, they’re much less likely to continue using it. At best, users might consider an app a poor, sluggish implementation.

So make sure your markup is squeaky clean and ensure that the behaviors of your app are consistent with users’ expectations for the devices on which it is deployed.

Swiping Left on Frustrations

Apps that developers have clearly built for the Web, but deployed as mobile apps can cause user frustration. One example of this problem is users’ having to continually pinch and zoom to view a user interface or read its text. Another example is form fields that are half the necessary width, preventing users from seeing what they type.

Swipe gestures on mobile apps might trigger maddening behaviors that are different from what users expect. Apps that do not have the expected behaviors can be frustrating to the average user and crippling to those who need accessible assistance.

Using Color Appropriately Is Crucial

One of the most important things to pay attention to is color. You must ensure that the colors you use have high value contrast and do not cause any color-contrast effects, so users can easily see and read the elements on a page. It’s also important to make sure color isn’t the only way in which you communicate particular information.

Be aware of the issues of people who have color-deficient vision. For example, don’t rely on changing a field’s border to green or red to inform users whether their input is correct or incorrect. You can use color to reinforce information, but text, iconography, or other forms of communication should always accompany the use of color to clearly convey information.

Tricky Touch Zones

For mobile devices, it’s also important to think about touch zones. If users have limited use of their hands or a tremor or other issue that reduces their fine-motor control, touch and tap-based interactions can be tricky. It’s important to allow a margin of error around smaller touch targets such as checkboxes, ensuring that an interaction still gets triggered even when users don’t tap exactly where they should.

We must also think about the placement of UI elements and consider how easily users can reach them. This could depend on whether they’re using their device with one or two hands, using their device in landscape or portrait mode, and the user’s hand size, mobility, and flexibility. For example, children have smaller hands, so any app that must be accessible to a child should assume a smaller range of reach.

Normalizing Accessible Mobile Design

At Progress, our Kendo UI team won’t release a component out of beta until it’s met all accessibility requirements. But we don’t have a single all-encompassing accessibility checklist, so we always strive to improve the accessibility of our designs wherever we can.

Plus, we encourage our users to send us messages through our feedback portal if they have any accessibility concerns that we have not addressed or ideas on how to improve our solutions. In regard to accessibility, we can always reach higher.

Accessibility for mobile design is actually the standard for UX design. Web design has evolved massively since the beginning of the Internet age, and the introduction of the smartphone triggered the first wave of mobile design. Now, we must focus on the human side of software by rethinking how to approach mobile design and ensure that the steps within our process address accessibility issues. As we move forward into the next era of mobile Web design, we must re-examine how we can improve accessibility and create spaces that are accessible to everyone. 

Director, Developer Relations, at Progress

Cape Coral, Florida, USA

Sara FaatzSara leads the developer relations team at Progress. She has spent the majority of her career in the developer space, building community, producing events, creating marketing programs, and more. With more than 20 years of experience leading corporate product marketing and community building for organizations whose primary target audience comprises software developers, Sara has a proven track record conceptualizing and orchestrating campaigns that evolve the brand and positively impact a company’s image and revenues. Over the years, she has run marketing departments, both large and small, built community programs from the ground up, created partner programs, and acted as a brand ambassador and spokesperson for various organizations. Sara received her BA in English Communication from the University of Denver.  Read More

Other Articles on Accessibility

New on UXmatters