Test the accessibility of your website for free! Try UsableNet AQA.

devices over wood blog 2.jpg

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

    by Luca Boskin

    Though websites largely remain the focus for brands on the path to accessibility, mobile apps are also a crucial channel to consider. They drive more engagement, boost customer loyalty and give brands much more options for personalization of their experiences.

    At Usablenet, we help clients review and develop accessible Native apps to ensure they are usable by people of all abilities. We do this by applying both the broad principles of the WCAG 2.0, along with the W3C's draft Mobile Accessibility Guidelines. This represents around 25 specific technical and design criteria. Native apps are different to websites in many ways, including accessibility. However, the core principles of inclusive design run throughout and the key aspects of accessible native apps are found in the importance of UX and design of the interface.

    Assuming you have read part one and part two of our mobile app accessibility blog series, we will now dive into the final two of six key techniques for inclusive app design: layout consistency and data entry.

    1. Focus on layout consistency 

    Components that are repeated across multiple pages should be presented in a consistent layout. In responsive web design (where components are arranged based on device size and screen orientation), web pages within a particular view (set size and orientation) should be consistent in placement of repeated components and navigational components. Consistency between the different screen sizes and screen orientations is not a requirement under WCAG 2.0.

    For example:

    • A website has a logo, a title, a search form and a navigation bar
      at the top of each page; these appear in the same relative order on each page where they are repeated. On one page, the search form is missing but the other items are still in the same order. When the website is viewed on a small screen in portrait mode, the navigation bar is collapsed into a single icon but entries in the drop-down list that appears when activating the icon are still in the same relative order.
    • A website, when viewed on the different screen sizes and in different orientations, has some components that are hidden or appear in a different order. The components that show, however, remain consistent for any screen size and orientation.

    The WCAG 2.0 success criteria that are most related to the issue of consistency are:

    • 2.3 Consistent Navigation (Level AA)
    • 2.4 Consistent Identification (Level AA)

    See below for a visual example of best practice when designing with a focus on touch:

    graphic showing multi screen consistency

    Consistency is key to creating seamless and cross-channel user experiences. It helps the user feeling comfortable and in control while starting a task, which may start on mobile and get completed on tablet or desktop. 

    2. Provide easy methods for data entry 

    Users can enter information on mobile devices in multiple ways such as on-screen keyboard, Bluetooth keyboard, touch, and speech. Text entry can be time-consuming and difficult in certain circumstances. Reduce the amount of text entry required, by providing select menus, radio buttons, check boxes or by automatically entering known information (e.g. date, time, location).

    See below for a visual example of best practice when designing to provide intuitive and easy methods for data entry:

    graphic displaying correct ways to into data on mobile

    Typing is proven to be a slow method of data entry. Providing alternatives such as autofill, data sharing between apps or dictation improves the overall app experience and prevents errors.

    In Conclusion: Executing Inclusive App Design

    With this final post in our inclusive app design series, we have now shared tips on the six major techniques to use to successfully make a native app accessible. When looking to execute your digital accessibility strategy, be sure to keep both website and app channels in mind, and implement the best practices shared here regarding screen size, color contrast, touch targets, mobile gestures, layout consistency and data entry. A commitment to design ensures a truly accessible site or app that offers users of all abilities the same level of interaction, the same ease of use, and the same access to content. 

    Unclear of where to begin in your digital accessibility journey; use our convenient digital accessibility checklist for a comprehensive and actionable plan regardless of where you're at in your journey.  

    Web Accessibility Mobile Apps

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