Accessibility Design: 4 Principles to Design Mobile Apps for the Visually Impaired

We usually come across websites and apps that have a poor usability quotient. This is acknowledged through gaps in the UI/UX, such as font size, improper navigation, lightening or color contrast issues, incompatibility with a certain user agent, etc.

These bad UI/UX experiences turn worse when a user with a disability (visual, hearing, movement) tries to access these apps or websites. That is why it is important to pay special attention to the UI/UX created for the disabled. This is where ‘Accessibility Design’ turns out to be a great help. 

“Accessibility design is a design process where the UI/UX is created for people with disabilities like visual or hearing impairment, mobility challenges, etc. It allows users with disabilities to navigate through a solution, understand it, and use the UI effortlessly.”

Creating an accessible design for a mobile app is different from the usual design creation. Here are 4 prime principles of WCAG that must be considered for creating accessible UI/UX, along with a few examples of how these principles can be executed. 

1. Perceivable

A perceivable interface is the one that a user is able to understand or interpret in some way, using one or more of their senses. To make mobile app UI/UX perceivable for a user with a disability, you can work on the following factors.

• Screen Size

Small screen size is the prime characteristic of mobile devices. These small screens with high resolution render a huge amount of information. However, the small screen size poses challenges on how much information can be viewed at a time, especially when people with low vision use magnifiers to read the content. When creating an accessible design, the following practices can be adapted to display content on a small screen. 

1. Minimize the amount of information that’s displayed on a page as compared to desktop/laptop. For this, a dedicated mobile version can be created that includes only a few content modules, fewer images, and have an emphasis on mobile usage scenarios.

2. CSS stylesheets can be used to render content on the different viewport width. For example, the navigation menu can remain hidden unless a user taps on the menu button.

• Contrast

Mobile devices are likely to be used in varied lighting conditions. Such scenarios usually pose challenges for users with low vision, making it difficult for them to access the content with poor contrast on mobile devices. Therefore, when creating accessible designs for mobile apps, contrast management can be a great help.

2. Operable

An operable interface is the one in which the interface components and navigation are seamlessly used. When creating an operable design for the users, some of the factors that can be considered include:

• Keyboard Control for Touchscreen Devices

Allowing mobile devices to connect with external keyboards, such as Bluetooth, USB On-The-Go or alternative on-screen keyboards like scanning on-screen keyboards is an important aspect when dealing with different groups of disabilities. Here is how: : 

1. Physical keyboards have a number of advantages over the touchscreen keyboards like clearly separated keys, predictable key layouts, etc.

2. Users with mobility disabilities can benefit from the keyboards optimized to reduce inadvertent presses (like different shaped keys, guarded keys).

 3. Understandable

Design should be able to adjust itself according to the various changing factors. Also, there should be clear layouts with a distinct call to action. For example:

• Highlight Actionable Elements

Elements that trigger change should be clearly distinguishable from the non-actionable elements. It is important to highlight areas in a mobile app that might have actionable items like links, buttons, etc. Actionable elements such as shapes, colors, style, positioning, conventional iconography, etc. can be used to distinguish the actionable items.

4. Robust

Robust design is the one that can be interpreted by a wide range of user agents, such as mobile, web, and even assistive technologies.

Creating Accessible Designs for Visually Impaired: How to do it? 

The approach for creating accessible designs is completely different from 80% of the apps available on the app stores. Here is how Daffodil helped RBI in building an app for the visually impaired (color blind, partially sighted, or blind people), enabling them to identify and differentiate between Indian banknotes. 

Situation: Indian banknotes have a number of currency-embedded features to identify and distinguish between them. Intaglio printing & tactile mark, variable banknote size, large numerals, variable color, monochromatic hues & patterns are some of them. Reserve Bank of India (RBI) wanted to make it convenient for the visually impaired to identify the notes through a mobile app. 

Solution: One of the major challenges in the project was to build an interactive interface for visually impaired users. By following the Web Content Accessibility guidelines, accessible designs were created that facilitate the visually impaired to scan the banknotes and identify its denomination. This included app onboarding through audio-description, giving instructions to use the app through audios, minimized the number of steps required to scan and identify the banknote, etc. 

 For people with hearing and visual impairments, the app has pre-defined vibrations for different denominations; one vibration for Rs 5, two vibrations for Rs 10, three for Rs 20, four for Rs 50, five for Rs 100, six for Rs 200, seven for Rs 500 and eight for Rs 2,000. In case the app is unable to identify the denomination, it uses a long vibration and asks for the note to be scanned again.

Planning to Update your App with Accessible Design? 

Design accessibility has certain benefits for a universal app. Also, mobile apps that target a group of users with a particular disability needs to pay attention to the standard regulations for creating an accessible design.

At Daffodil, our experts pay special attention to these regulations for creating accessible designs. If you’re planning to update your existing app or create a new one from scratch, then our team specializes in this domain and can help you out. To get started, set up a 30-minute free consultation with our experts so that they can help you in the execution of the accessible design for your app.