Mobile apps often connect the digital and physical worlds, ushering in major technologies that quickly become part of our daily lives. But for the one billion people around the world with disabilities that can’t access these apps as well as their peers, mobile apps could become a barrier.
iSoftStone North America has worked with global corporations to design, build and launch accessible mobile apps. Here’s what we’ve learned about building mobile apps with accessibility as a core requirement.
- Keep navigation simple.
- Make menu hierarchies consistent.
- Create short and concise copy.
- Background images shouldn’t interfere with popular assistive devices.
- Break complex topics into multiple pages.
- Simplify user actions as much as possible.
- Recognize users will utilize a variety of input techniques: touch, stylus, keyboard, mouse, and others.
- Provide alternative text labels for all interface elements. This allows non-visual users to interact with the elements.
- Ensure pinch-to-zoom is functional. Some users, especially those with low vision, will benefit from being able to magnify the screen.
Record and react to accessibility preferences.
If you are using popular design kits, your design elements – such as text – should automatically adapt to accessibility preferences, such as bold and larger text or high contrast settings. Design your mobile app so it honors accessibility preferences, such as reducing motion or allowing control-switching with an assistive device like a puff/blow controller for mobility impaired users. Allow users to override custom fonts and use system fonts.
Closed caption should be used for all videos
This allows the deaf and hard-of-hearing to engage with spoken content. Likewise, consider adding audio descriptions for important video or visual content for users with vision impairments.
Critical information must be conveyed in the text. Vision-impaired users rely on text to understand what is in a mobile app, so make text the channel for your most valuable information. Take care to pick fonts, colors, and styling that will be readable to users with poor vision.
User testing is critical for mobile app design. Guesswork, assumptions and imagination aren’t enough for proper development. User testing is vital, and likely already part of your development process. Only data will show you how an impaired user navigates your app, how their usage patterns differ from other users, and how their assistive devices (such as screen readers) interact with your app.
Tools for testing Accessibility mobile apps
There are many accessibility tools you can use to test your app. iSoftStone uses a variety of tools to test a broad array of accessibility issues. When you find a tool that you love, stick with it for the entire testing process.
General accessibility tools
- Accessibility Insights for Web
Accessibility Insights for Web is a Chrome extension that helps developers find and fix accessibility issues in web apps and sites. The tool supports two main components.
Testing apps available for Chrome, Firefox, and Android. Coming soon to iOS. The axe scan engine is what Microsoft's Accessibility Insights tools check against.
- Nu Html Checker
Parse HTML for correct formatting by entering HTML or a URL.
Tenon website allows you to enter a URL to test or paste code directly for analysis.
- WAVE (Web Accessibility Evaluation Tool)
The WAVE Chrome and Firefox extensions allows you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers. (WAVE also offers other tools including an enterprise-level tool that provides monitoring and reporting of accessibility over time.)
- a11yTools Safari macOS by Paul J. Adam
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location in an Extension for Safari used for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error to developers and designers.
- a11yTools for iOS by Paul J. Adam
a11yTools is a collection of HTML Web Accessibility Testing Tools in one location on your iPhone and iPad for quick and easy Accessibility testing. Run your favorite Accessibility testing tool and easily take a screenshot on your phone showing the a11y error to developers and designers.
Color, contrast, and vision
- Color Contrast Analyser by Paciello
The Colour Contrast Analyser (CCA) is a desktop application for Windows/macOS that helps determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. Includes WCAG 2.1 compliance indicators, entering colors or using a color picker, alpha transparency support, and a colour blindness simulator.
- Color Contrast Tester by Joe Dolson
Enter foreground and background colors in Hex, RGB, or HSL and see WCAG compliance results.
Funkify is an extension for Chrome that helps you experience the web through the eyes of some extreme users with several different abilities and disabilities.
- Gunning Fog and Flesch Reading Ease Test. Reading-ease tests determine how easy copy is to read and understand. The easier copy is to understand, the more accessible it is - especially to users with cognitive impairments. Remember, users the rely on a screen reader face stressful cognitive loads on some pages – easy-to-read copy helps them navigate a site.
- Bookmarklets for Accessibility Testing
- Diagnostic.css by Karl Groves
Diagnostic.css is a CSS (Cascading Stylesheets) file which, when applied to a web page, will highlight accessibility errors in the page.
Client-side script that checks HTML source code and detects violations.
Other accessibility tools & testing resources
- Powermapper Assistive technology compatibility tests
Shows results from using various combinations of ARIA, HTML, browsers, and screen readers. This provides insights into expected success and failures.
- GitHub - paypal/AATT: Automated Accessibility Testing Tool
Integrate accessibility testing into your existing automation test suite using AATT. AATT includes HTML CodeSniffer, Axe and Chrome developer tool with Express and PhantomJS, which runs on Node.
- My Post-CSUN Comparison of Web Accessibility Checkers | Terrill Thompson
- Pa11y - Your automated accessibility testing pal
A range of free and open source tools to help designers and developers make their web pages more accessible. Much of it applies to testers as well.
- Laws and checklists for testing accessibility (slide show) by Paul J. Adam
iSoftStone testing process for mobile app accessibility
Guesswork, assumptions and imagination aren’t enough for proper development. User testing is vital, and likely already part of your development process. Only data will show you how an impaired user navigates your app, how their usage patterns differ from other users, and how their assistance devices (such as screen readers) interact with your app.
Finding testers with a range of impairments can be a challenge. Remember, vision impairments are the most common disability by far with color blindness being far more common than we may think: 1 in 12 men and 1 in 200 women are color blind.