devices over wood blog 2.jpg

    Mobile App Accessibility Techniques for Inclusive Design: Part 1 [Blog]

    by Luca Boskin

    Accessibility is an important social issue that too often is overlooked, or pushed aside, in the digital world. Online, regulations are much less clear than in physical environments and many times web accessibility aids and enhancements do not exist. Due to a string of legal backlash in recent years, some businesses have begun to make their digital properties accessible, but the focus still seems to remain on websites. Mobile apps remain largely unaccounted for.

    In this blog series, we aim to highlight the most important aspects of inclusive design for native apps. We will do this by outlining below the most critical design aspects that a native app designer or developer should be sure to incorporate to ensure the best results for users of all abilities.

    We have provided – along with technical W3C descriptions – UX examples that help illustrate each principle, and a UsableNet-distilled, designer-friendly description of how to think about each one. First, we will focus on two key inclusive app design techniques: designing for screen size and color contrast.

    1. Design for Small Screen Size

    Small screen size is one of the most common characteristics of mobile devices. While the exceptional resolution of these screens theoretically enables large amounts of information to be rendered, the small size of the screen places practical limits on how much information people can actually view at one time, especially when magnification is used by people with low vision.

    Some best practices for helping users to make the most of small screens include:

    • Minimizing the amount of information that is put on each page compared to desktop/laptop versions by providing a dedicated mobile version or a Responsively designed version.
    • Providing a reasonable default size for content and touch controls to minimize the need to zoom in and out for users with low vision.
    • Adapting the length of link text to the viewport width.
    • Positioning form fields below, rather than beside, their labels (in
      portrait layout) 

    See below for a visual example of what to do and what not to do when designing for a small screen size:

     do's and don'ts when designing for small screens

    Approaches such as content prioritization and progressive disclosure favors clarity over density of information, helping the user stay focused on the most important information throughout the whole app experience.

    1. Focus on Color Contrast

    Mobile devices are more likely than desktop/laptop devices to be used in varied environments, including outdoors, where glare from the sun or other strong lighting sources is more likely. This scenario heightens the importance of use of good contrast for all users, and may compound the challenges that users with low vision have accessing content with poor contrast on mobile devices.

    The WCAG 2.0 success criteria related to the issue of contrast are as follows:

    • 4.3 Contrast (Minimum) (Level AA) which requires a contrast of at least 4.5:1 (or 3:1 for large-scale text) and
    • 4.6 Contrast (Enhanced) (Level AAA) which requires a contrast of at least 7:1 (or 4.5:1 for large-scale text).

    SC 1.4.3. allows for different contrast ratios for large text. Allowing different contrast ratios for larger text is useful because larger text with wider character strokes is easier to read at a lower contrast. This allows designers more leeway for contrast of larger text, which is helpful for content such as titles. The ratio of 18-point text or 14-point bold text described in the SC 1.4.3 was judged to be large enough to enable a lower contrast ratio for web pages displayed on a 15-inch monitor at 1024x768 resolution with a 24-inch viewing distance. Mobile device content is viewed on smaller screens and in different conditions so this allowance for lessened contrast on large text must be considered carefully for mobile apps.

    For instance, the default point size for mobile platforms might be larger than the default point size used on non-mobile devices. When determining which contrast ratio to follow, developers should strive to make sure to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. Note, however, that the use of text that is 1.5 times the default on mobile platforms does not imply that the text will be readable by a person with low vision. People with low vision will likely need and use additional platform level accessibility features and assistive technology such as increased text size and zoom features to access mobile content.

    See below for a visual example of what to do and what not to do when designing with a focus on color contrast.

    phone screens showing color contrast

    Text legibility is preserved by an adequate contrast between the font color and the background. For AA compliance, text should have color ratio of at least 4.5:1 (larger text at least 3:1).

    You're now caught up on two of the six fundamental techniques for designing inclusive mobile apps. For the next two techniques, visit part 2 of our blog series, which focuses on touch targets and mobile touchscreen gestures.

    Web Accessibility Mobile Apps

    Need to improve digital usability, accessibility or performance? We can help.
    Partner with us. Get in touch.