How to increase the reach of a mobile app to customers by 26%?

2022

futured.app

Design

Android

iOS

KMP

What you will learn in the article:

What is accessibility?
Why is accessibility important to address?
What mobile apps are legally required to have accessibility?
How do we address accessibility in Futured?
What (and who) does accessibility affect?
Application example — National Museum in your pocket

What is Accessibility

In the digital world, accessibility means that mobile/web applications and sites can be used by everyone regardless of their disability, knowledge and skills or technical equipment.

If we had to be specific, for mobile applications it is, for example, a screen reader, an increase in the size of the text, a decrease in transparency, a limited movement of the user interface, a dark mode or a change in the orientation of the phone.

Why it is important to address accessibility

One in seven people lives with some form of disability that changes the way he interacts with the outside world, so it is extremely important to think about them when developing the application as well. In principle, it is necessary to take into account three basic types of disability and their solution:

I — Visual

These include blindness, color blindness, various forms of vision loss, and cases where screen use is uncomfortable or uncomfortable. Possible solutions:

screen reader (VoiceOver for iOS and TalkBack for Android)
support for large text and images
color rendering
dark mode support
Ensuring the right color contrast or increasing the color contrast

II — Auditory

There are all kinds of hearing loss and also situations where the user does not want to be disturbed by a device such as a work meeting or going to the cinema. Possible solutions:

closed captions
visual and haptic response
Type to Siri mode (for iOS)

III — Physical and Cognitive

For people with physical and cognitive disabilities, the device is physically challenging to operate. Possible solutions:

The application should be designed so that it can be controlled without the need for fine motor skills.
Every destructive and irreversible action should have confirmation.
The app supports screen readers (Siri for iOS and TalkBack for Android) and push-button controls (Switch Control).

What mobile apps must have accessibility by law

In the European Union, the Directive on the accessibility of websites and mobile applications of public sector bodies applies.

In the Czech Republic, on the basis of this directive from 23 June 2021 applies the law for example, for the state, legal entities established by law, or schools, with Recommended Methodology according to the recognized International Standard Web Content Accessibility Guidelines (WCAG) 2.0.

> Tip: Take a look webinar Application of the EU Directive to native mobile applications.

If accessibility is not a legal obligation, it is a good idea to address it anyway. Only by supporting basic accessibility can you increase your potential reach to customers o 26%.

How we solve accessibility in Futured

In Futured and with our clients, accessibility is becoming an increasingly discussed topic. We want everyone to use our app, so we strive to work with the latest standards, attend conferences, communicate with industry experts and collaborate on testing with people with disabilities.

We already have large projects that promote accessibility in a high standard — one of them is an application for the National Museum, where this standard was required by law (and which we will cover in the next section of the text).

What (and whom) accessibility affects

Adding accessibility will affect designers, developers, and QA testers alike:

Design.Accessibility starts with the designer designing the user interface so that the application can be used by anyone regardless of the types of disabilities mentioned above. Thus, the design should favor simplicity (consistency of elements, complex tasks should have a simple flow) and readability (information can be obtained by sight, hearing or haptic response). After the designer suggests some functionality, he sits down with the developers and QA team to consult on potential issues and possibly modify the design.
‍Development. In development, we use native tools built directly into SwiftUI and Jetpack Compose, making it as natural as possible for users to use. An important part of the development process is constant contact with the designer, with whom we look for the best possible solution, as well as with the client to whom we ideally send all iterations.
‍QA. The task of the QA team is to test that the application is easy and convenient for people with disabilities to use and that it works as it should — that is, that with the disabled onaccessibilidad functions can be used to obtain all information and complete all actions. Even testers should know the WCAG standard. If they find any error, the task goes back to the developer.

Application example — National Museum in your pocket

The National Museum is a state institution that must promote accessibility by law see above.

At an early stage of development, we carefully studied the functionalities that we need to focus on in order to meet the given standard. We started from the aforementioned WCAG 2.0 and modified mobile variants.

We then itemized the elements in our specification to make sure which points the application for the National Museum refers to and what we need to do to achieve the desired result. We worked further with the specification during design, development and testing.

> Tip: It is a good idea to think about accessibility at the beginning of development, adding it later will be significantly more expensive and development will noticeably lengthen.

For the application National Museum in your pocket It took us the most time to implement Content readers and dynamic font.

Content Reader makes the contents of the phone accessible to the visually impaired as well. As part of the implementation of this feature, we added additional information so that even a visually impaired person could find all the important information on the screen. For example, these are images that have their own caption, or buttons explaining what can occur behind the action. In addition, when implemented, it is possible to influence the order in which the reader reads the content, as well as to cluster important elements into one so that the user can navigate the content better.

Dynamic font allows you to increase the size of the text. For implementation, it is necessary to count on a design that can adapt to the large text. Together with larger text, it is also good to think about the correct enlargement of the icons. Another good practice is to flip horizontal elements to vertical ones at a certain size.

‍

The app also supports dark mode in light mode, contains subs to all audio tracks and supports platform-specific features such as button highlighting.