How to Incorporate Accessible Design Elements into Mobile Apps

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.