Quick Tips for Developing Accessible Mobile Apps

June 19, 2020

Accessibility is critical to ensure that mobile apps reach the widest audience possible, and comply with accessibility laws and regulations.

Android and iOS development environments include accessibility features to help people with disabilities access and use apps. Common accessibility features include dynamic text and layouts, accessibility labels and hints, accessibility traits, and other features.

Here are some quick tips to make your apps more accessible for assistive technology users.

Use Accessible Color Schemes

Color contrast is critical for color-blind and low-vision users. Using accessible colors for text ensures that your content is readable for all users (including people with disabilities).

To ensure accessible color contrast:

• Avoid placing text over background images
• Avoid using color alone to convey information
• Check lighter shades of text (i.e. grey text) to ensure sufficient contrast.

Web-Aim’s Color Contrast Checker is an excellent tool for testing color schemes for accessibility and WCAG conformance.

Apple and Android provide specific guidance for developers regarding accessible contrast and color schemes:

• Color and Effects for iOS
• Android Text Visibility

Provide Accessible Descriptions for Images and graphics

Image descriptions provide accessible information for AT users about the purpose and content of images. Both Android and iOS include methods for adding a description to an image.

In Android, you can include a description for an ImageView using the android:contentDescription attribute. Learn more about accessible images in Android

In iOS, you can provide an accessible description for images by setting isAccessibilityElement to true and adding an accessible label (accessibilityLabel). Learn more about accessible labels for images in iOS

Use Dynamic Text Sizes

Dynamic text allows users can increase text sizes using accessibility settings in iOS and Android. By using dynamic text in your layouts, you can ensure that your app works with larger fonts enabled in iOS and Android.

In Android, you can specify font sizes in scalable pixels (sp) to allow fonts to adjust to user preferences. For Android apps, we recommend testing your layouts with larger fonts enabled to ensure that they work well at all font sizes. Learn more about pixel densities in Android

In iOS, you can take advantage of dynamic type by using predefined text styles such as headline, body, and title1. You can configure text styles to adjust to user preferences in interface builder or directly in source code. Learn more about dynamic type in iOS.

Use Adaptive Layouts

Adaptive layouts ensure that your app is usable on the widest array of screen sizes and orientations. By providing an app that can work on both landscape and portrait formats, you can ensure that people with disabilities can access and use your app on tablets, phones, and other mobile devices.

In Android, you can create adaptive layouts by using flexible layout dimensions (dp), creating alternate layouts, and using nine-patch bitmaps for scalable graphics. Learn more about adaptive layouts in Android

iOS supports Auto Layout for designing adaptive interfaces. Auto layout automatically adjusts the layout and presentation of your app based on screen resolution, orientation, dynamic font size, and other factors. Learn more about adaptive layouts in iOS

Ensure Adequate Touch Target Sizes

Ensuring adequate touch target sizes is critical for users with motor and visual impairments. Target sizes should be large enough for users to easily activate and use touch controls. In the Web Content Accessibility Guidelines (WCAG 2.0), the minimum touch target size for priority AAA conformance is 44 x 44 CSS pixels.

For Android, Google recommends that touch targets should be at least 48dp by 48dp. Extra padding can be added to text links to meet this requirement. Learn more about touch target sizes in Android

In iOS, touch target sizes should be at least 44 by 44px to ensure that users can easily activate interactive components. Learn more about touch targets in iOS

Ensure that Controls Receive Focus in a Logical Order

Assistive technology devices such as Talkback and VoiceOver provide a visual focus indicator to help orient users. Managing focus is critical to ensuring accessibility for assistive technology users.

The focus order for your app should match the visual reading order to ensure accessibility for AT users. If the programmatic focus order of elements does not match the visual reading order, some users may have problems using your app.

For both Android and iOS, its important to test your apps with assistive technology to ensure that the focus order matches the visual reading order. In Android, you can override the focus order in your app using XML. Learn more about managing focus in Android

For iOS, focus order is determined by the physical layout of controls in your app. You can adjust the layout and reading order of elements by using the UIAccessibilityContainer element. Learn more about UIAccessibilityContainer for iOS

Provide a Unique Title for App Screens

Provide a unique title for all app screens using the app bar title. The app bar title helps orient users and should summarize the content or purpose of the screen.

In Android, you can use the default ActionBar or Toolbar to configure a unique title for your app bar. Learn more about the app bar in Android

In iOS, you can configure and customize the UINavigationBar to display a unique title for your app. Learn how to customize the app bar in iOS

Use Headings to Structure Your App Screens

Headings provide semantic information about the structure of your app content. Screen readers such as VoiceOver and Talkback also allow users to navigate using headings.

In Android, you can use the accessibilityHeading attribute to identify headings for accessibility services. Android also supports accessibility-friendly pane titles using the accessibilityPaneTitle attribute. Learn more about headings and titles in Android

In iOS, you can organize your content into sections using the UIAccessibilityTraits header property. Learn more about section headers in iOS

Provide an Accessible Label for Form Controls, Buttons and Other Interactive Components

Providing accessible labels for forms and buttons is critical to ensure that assistive technology users can access and use your app. Accessible labels describe the purpose of a control and should be clear and concise.

In Android, you can use the contentDescription attribute to add an accessible label for interactive components. Learn more about accessible labels in Android

In iOS, you can use the accessibilityLabel property to assign an accessible name for interface components. Learn more about accessible labels in iOS

More Tips

iOS includes UIAccessibilityTraits to help assistive technology users understand the purpose of controls. Use accessibility traits in iOS to provide additional semantic information for assistive technology (AT) users.

Conclusion

Android and iOS development environments include accessibility features to help you develop and deploy accessible apps. Here is a brief summary of techniques for accessible app development:

• Use dynamic type and layouts
• Provide accessible labels for forms, buttons and other interactive components
• Markup lists, headings, and other components for accessibility
• Ensure that all interactive components receive focus in a logical order

By making your apps accessible, you can reach the widest audience possible, avoid legal liability and comply with accessibility regulations.

If you have questions about accessibility or need help, please do not hesitate to contact us. Also, you can check out our mobile accessibility solutions page for more information.

---