How iSoftStone Develops Inclusive Mobile Apps

Mobile apps often connect the digital and physical worldsushering 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. 

Inclusive design for mobile apps

We apply the standards used for web design to mobile app design. There are resources to help you design better mobile apps. Start with guidelines from Android,iOS, and WCAG and get your whole team trained on the guidelines that impact your users. 

WCAG 2.1 Core mobile development concepts: 

  • 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. 
  • Axe
    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
    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
    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. 

Content authoring 

  • 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. 

PDF accessibility 

Bookmarklets 

  • Bookmarklets are small JavaScripts stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. They can be used to target some aspects of accessibility testing on web pages. 
  • Bookmarklets for Accessibility Testing
    Bookmarklets for Accessibility Testing use JavaScript to highlight roles, states, and properties of accessibility elements on the page. They are accessible to screen reader users and work on any browser including mobile phones. 
  • 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. 
  • HTML_CodeSniffer
    Client-side script that checks HTML source code and detects violations. 

Other accessibility tools & testing resources 

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.