How to ensure the accessibility of mobile apps?

Motivation for building accessible mobile apps

In the project, we have developed web and mobile services for the Finnish public sector. In Finland, The Act on the Provision of Digital Services (306/2019), which is based on the European Accessibility Directive (2016/2102), requires the public sector to comply with accessibility requirements in their digital services. The services and their content must meet the Web Content Accessibility Guidelines (WCAG) 2.1, level A and AA.

Even if accessibility would not be required by the law, you might want to consider building accessible services. According to The World Health Organization (WHO), more than 2.5 billion people need assistive technologies, and many more people benefit from accessible solutions. Almost half of mobile phone users use accessibility features, according to an accessibility study done in the Netherlands. Among the most common features are using dark mode, adjusted font size, bold text, and screen zooming. It’s not only the people who have permanent disabilities who use these features, but almost everyone has some occasional limitations. An accessible mobile app will reach more people and might even give a competitive advantage.

Accessibility for mobile apps vs. web

In addition to the web, WCAG can be also applied to mobile apps and other information and communication technologies. To learn how WCAG can be applied to mobile web content, mobile web apps, and native and hybrid apps, see Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile. 

While the majority of user interface patterns from web technologies are equally applicable to mobile apps, there are some accessibility challenges specific to mobile, including:

• Small screen
• Zoom and magnification
• Touch and gesture interface
• Adjustable display orientation
• Varied usage environments

Some of these challenges are addressed by WCAG, e.g.:

• Zoom and magnification: SC 1.4.4 Resize text and SC 1.4.10 Reflow
• Touch and gesture interface: SC 2.5.1 Pointer gestures
• Adjustable display orientation: SC 1.3.4 Orientation

A small screen limits the amount of information that can be displayed at the same time. Especially interactive controls, such as buttons and links, need a big enough target size and space between adjacent controls, to make them easier to activate. The screen can be zoomed or magnified, but they might expose new challenges if all content is not visible simultaneously and horizontal scrolling is required. Varied usage environments expose even more challenges to seeing, hearing, understanding, and accurately touching the screen. Complex gestures should be avoided, and in general, it’s good to provide alternative ways to operate the application.

On mobile platforms, like Android and iOS, there are different methods to assist in the use of web apps and native mobile apps. Browsers usually have their own settings for text size and zooming, for example. Native apps should support the system-level settings, like platforms’ accessibility settings for text size, styling (bold text), high-contrast text, and magnification.

Testing the accessibility of mobile apps

In our project, accessibility was taken into account from the start of the project, by agreeing on the accessibility requirements and designing for accessibility. Also accessibility testing was started early in the project, and it has been a continuous process during the development and verification. Testing has been a shared responsibility between the designers, developers, and testers.

If your application supports many mobile platforms, be sure to test them all. Platforms may have differences in the accessibility features they provide. Native mobile apps should support the platform’s accessibility features and other features specific to mobile devices like changing device orientation.

When testing a web service you can take advantage of the developer tools available on the desktop browsers, so it’s easy to inspect elements and how they are implemented. Also mobile layout and responsiveness can be tested using developer tools.

When it comes to native mobile apps, they run only on mobile devices, and you don’t necessarily have access to the mobile app code structure. You can still use accessibility scanners to detect some of the visual and structural issues. Depending on the tool, scanners can even show how the elements are coded and propose improvements. Here are some accessibility testing tools including accessibility scanners listed: Automated accessibility testing of Android and iOS apps.

Similar to the web, you should also test mobile apps with keyboards and screen readers to ensure the application can be operated in alternative ways.

The following are my recommendations for testing mobile apps to ensure that accessibility is taken into account for the wide variety of users.

1. Use accessibility tools & scanners

Many accessibility guidelines can be tested already in the design phase like color contrast. There are design tools, like Figma, and standalone tools, like Colour Contrast Analyzer and WebAIM Contrast Checker, that provide the possibility to test and find good color combinations for text and background. It can be also checked that the designs have enough accessibility annotations to help developers code the elements, such as element sizes and roles, heading levels, text labels, etc. There are different accessibility annotation tools, such as A11y Annotation Kit for Figma, that can be helpful.

With accessibility scanners, you can easily detect common accessibility issues, and get suggestions on how to fix them. Here are some scanners for mobile apps:

• Google’s Accessibility Scanner on Android can suggest improvements without pinpointing the issues on the code level
• Apple’s Accessibility Inspector with Xcode requires access to the application code
• Axe DevTools Mobile for iOS and Android can scan the application and show the issues even on the code level

Here are a few things that you can check with the help of accessibility scanners:

• Color contrasts
• Touch target size
• Content labels
• Element roles
• Headings
• Alternative texts

2. Test platform features

Many people use the accessibility features provided by mobile platforms. Ensure that the mobile app adapts to the device orientation and system settings. Mobile apps should not block the use of platform-level user preferences.

• Test with different font sizes and styles (bold text), and high-contrast text. Ensure text is not forced to a certain size or style.
• When increasing the font size, the text is wrapped so that it’s easier to read without needing horizontal scrolling.
• Test that the app works with both portrait and landscape orientation and that all the elements are visible and accessible.

Here are quick guides on how to get started with using accessibility features on mobile platforms:

• Android accessibility overview
• Get started with accessibility features on iPhone

3. Test keyboard accessibility

While the most popular way to operate a mobile device is using a touch screen, it's good to remember that mobile devices can be used with keyboards and many other assistive input devices, like Braille keyboards, joysticks, speech input, and switches. Some devices like tablets may have their integrated keyboard but often those are external devices.

Usually, it’s enough to test the accessibility with one keyboard as other assistive devices work similarly. Testing considerations are no different in mobile apps from the web:

• Users must be able to navigate to all interactive elements with the keyboard.
• There should be no keyboard traps where you could get stuck.
• Ensure that focus is visible and advances logically from one element to another.

4. Test with screen readers

Screen readers may be used by blind people, but also by sighted people who can more easily understand the content in an auditory format. It's best to test with all supported platforms. Both Android and iOS have screen readers included on their devices: Android TalkBack and iOS VoiceOver. The basic commands and operations are fairly easy to learn. Deque University has nice quick guides for screen reader usage on different platforms: Screen Reader Keyboard Shortcuts and Gestures.

When testing with screen readers:

• Pay attention to the reading order: Is the content understandable and logical, considering that you might not have any visual information available?
• Make sure you can access all the visible information and elements also with a screen reader.
• Ensure that visual elements have corresponding text alternatives if necessary for understanding the context.
• Use the screen reader controls to navigate through specific elements like headings, links, buttons, and landmarks. This makes sure that the elements are coded properly with the correct roles.
• Make sure that text inputs also have labels in addition to the placeholder text so that the screen reader user can understand the context after inputting the text.

5. Apply automated accessibility testing

If you want to go all the way, you could also add automated accessibility checks and tests in your development pipeline. Test automation could be a thing to explore with testers and developers together. Here is one list of automated accessibility testing tools for Android and iOS: Automated accessibility testing of Android and iOS apps. 

Automated tools can detect technical issues like missing names, text alternatives, language definitions, etc. Still, only a small part of accessibility issues can be detected automatically. It is not possible to detect that something is missing or not logical or understandable, so manual testing is required on top of automation.

Key takeaways

Ultimately, ensuring the accessibility of mobile apps is not so different from the web. Just keep in mind that apps are used in varying environments and by people with different abilities. Clarity, contrast, and element sizes are important design considerations for mobile apps. People may want to use the platform's accessibility features and change screen orientation, to make using the app easier. Taking accessibility into account helps all users and improves the overall usability of the apps.

As a summary, here are my recommendations for testing mobile apps’ accessibility:

1. Use accessibility tools & scanners
2. Test platform features (accessibility, screen orientation)
3. Test with keyboard
4. Test with screen readers
5. Use test automation to support manual testing

I also recommend integrating accessibility testing into the design and development process so that testing is done early and often. It enables continuous learning for all project members and improves accessibility in small steps rather than having a big debt at the end of the project.