Wed, Nov 16, 2022

Tips for Mobile Accessibility

Tips for Mobile Accessibility

Everyone knows the purpose of digital accessibility, but how many designers and developers keep it in mind when building a mobile application? It's a fact: most apps are not adapted to people with some form of disability.

Lack of informations, lack of training, lack of interest… there are many reasons why there are so few people committed to this subject.

However, besides moral considerations, accessibility provides many advantages that are often overlooked: acquire new users and produce better quality apps.

At PandaSuite, as a no-code app builder, we aren't perfect but we decided to get more serious about this subject. We did some research and decided to share our key learnings in this article.

Common misconceptions

We realized that web accessibility is often associated with misconceptions. Now is the time to debunk them:

🙃 #1: Digital accessibility is only a technical issue that must be managed by the app developers or editors

Yes, if you want to make sure your app is compatible with assistance solutions (VoiceOver, Talkback), you need to implement it into the code. However many accessibility best practices are related to the interface design and navigation, which require no technical background.

🙃 #2: A mobile application is or is not compatible!

No, this is not black or white. According to the WCAG 2.0 standards, there are different levels of conformance: low, middle or high. Implementing good practices such as adding an option to change the size of the text or more adapted buttons are quick-wins to move gradually in the right direction.

🙃 #3: Web accessibility only concern people with disabilities.

Not only! We will come back to this, but digital accessibility also helps people who have facing difficulties in their use of digital technology, such as older people or people with a temporary disability.

Digital accessibility is therefore everyone's business, for everyone, and it is a way of building apps that can be implemented gradually. From now on, there is no reason to back down. Here are some resources to better understand the subject and make your application more accessible starting today.

Be accessible to any user in any situation (
Be accessible to any user in any situation (DCStudio, Freepik)

What is digital accessibility?

Digital accessibility is about making digital tools (websites, applications, etc.) accessible to people with disabilities, whatever their equipment and needs.

Around 15% of the world's population suffer from some kind of disability or impairment. Their use of mobile devices and mobile applications is constantly increasing as for the rest of the population.

There are several forms of disability: visual, physical, cognitive and hearing. It is difficult to get a typical portrait of a person with a disability and this is why digital accessibility covers a variety of parameters: graphics, audio, technical.

By making your app accessible, you also address other categories of people who encounter difficulties in their use of technology, without being disabled. Seniors generally suffer from physical and hearing losses and they represent today 12% of the world population. As the population is getting older, just think about how many of your current users will be in the senior category in a few years.

The legal framework

Let’s focus on France: the requirements of accessibility for public websites to people with disabilities were introduced by the article 47 of the law of 11 February 2005.

This was reinforced in 2016 by the European Directive for the accessibility of websites and mobile applications which aimed to harmonize the laws between countries.

First, these guidelines were only applicable for public services and private companies with a turnover of more than 250 million euros.

Since June 23, 2021 for the public sector and July 1, 2021 for large private companies, mobile applications are also included in the legal obligations of digital accessibility.

For the public sector in France, there is the Référentiel général d'amélioration de l'accessibilité, commonly called RGAA, which serves as a roadmap. It is published by the inter-ministerial digital department (DINUM).

 
Published by the DINUM, the RGAA sets the framework in France
Published by the DINUM, the RGAA sets the framework in France

It includes 106 criteria that detail what must be done for a digital tool to be considered accessible. These criteria are based on recommendations issued by the W3C, the World Wide Web Consortium, the international organization that defines specifications and technical standards related to the Web.

The Web Content Accessibility Guidelines (WCAG) 2.0 standard defines three levels of accessibility:

A : low accessibility

AA: middle accessibility

AAA : high accessibility

But in reality, these guidelines are very little applied.

Who is concerned?

Today, every app creator should be concerned but some industries are more especially targeted by these specifications. They are the ones which are in relationship with the largest audience, namely :

  • State services;
  • Local authorities;
  • Public institutions;
  • Organizations with a public service mission;
  • Companies with a turnover of more than 250 million euros;
  • Public interest organizations.

Challenges and benefits of accessibility

Beyond the legal and moral considerations, accessibility also provides many benefits.

The first benefit of accessibility is the increase in the number of users of your application. In concrete terms, your application can potentially gain 10% more users, who are currently turning away from your application.

Being part of an accessibility approach allows you to enhance the image of your company / organization to your customers and employees by demonstrating your social responsibility.

By following these good practices, your application is also of better quality, offering a clearer and more understandable user experience.

Make your app more accessible

Accessibility is a global approach: it must be taken into account in the user interface and in the development of the application. Even if these are not exhaustive, here are some good practices to follow for your mobile application.

Design

🟥 Improve contrasts

When it comes to design, it's important to ensure good readability and clarity of the user interface. Especially since mobile devices are used in a variety of environments including outdoors where the brightness can easily impact color perception. A good choice of colors allows you to ensure that all users can differentiate between application components.

The information conveyed by color should also be available through other means (underlined text for links, etc.)

👆️Create large and explicit interactive areas

Mobile screens are small and they display a lot of information. Each element must be easily touched by the user and be sufficiently distant from the others.

Consider that an interactive area should have a minimum height/width of 9mm.

📽️ Provide subtitles or alternate versions for all your multimedia content

This allows people who are deaf or have hearing difficulties to access the content. More generally you should keep in mind to offer text alternative to any non-text content.

🖼️ Change the orientation between portrait and landscape

To make it easier to use, the app needs to be compatible with both horizontal and vertical orientation of the phone. Indeed, some users have to fix their mobile device on a piece of equipment (for example a wheelchair) and in this case, they do not control the orientation of their device.

📝 Be able to increase the size of texts

This option allows visually impaired people to navigate more freely within the application.

🎢 Limit scrolling actions

These actions can be difficult to undertake for people with motor disabilities. Therefore, we need to provide interfaces that allow direct access to content and show as much information as possible without the user having to scroll.

🚀 Facilitate access to information

More globally, care must be taken with the information architecture: the user must easily access each content and via several navigation modes. Page titles must be clear and facilitate the navigation of each page.

Development

The operating systems (iOS, Android) offer assistance solutions for people with disabilities:

  • Screen readers (VoiceOver on iOS and Talkback on Android): they provide sound information at the passage of the finger and allow to describe each element of the UI (button, image, text).
  • Focus navigation devices
  • Text magnifiers or general display magnifiers
  • Color correctors (especially for color blindness).

The challenge is to make your application compatible with these solutions by relying on the accessibility rules of design and development. If you develop your application yourself, you will find many resources online to help you achieve this. If you use an app builder such as PandaSuite, make sure that these standards are taken into account and do not hesitate to contact the support if necessary.

For screen readers, for example, make sure that each element presented has a detailed description. That if the visually impaired user clicks on the image, he gets a precise name and not untitled.jpg for example.

Screen readers allow you to read the elements (text and images) displayed on the screen.

VoiceOver is available for every iOS device
VoiceOver is available for every iOS device

Conclusion

Mobile accessibility is a win-win issue. To make it a success, it needs to be taken into account from the beginning of the project. It is a roadmap that guides each step of your application development and concerns everyone.

The regulatory framework has yet to be clarified, but many good practices are already available for anyone who wants to build a more accessible app.

At PandaSuite, we are working to improve our compatibility with native iOS & Android assistant solutions. Even if we are still lacking in some areas, we are here with you to move forward in the right direction. Do not hesitate to contact our team to discuss about your project.

Useful links to learn more:

 

Cover image: macrovector_official / Freepik

Share this article

Get started now with the free version

No credit card is required, and there is no time limit. Discover our interactive no-code creation tool today and join over 50,000 users around the world.

PandaSuite Studio