When it comes to designing a mobile app, ensuring that it is accessible and user-friendly for everyone is crucial. In this article, we'll provide you with a concise checklist of accessibility requirements for mobile app developers to help you create an exceptional app user experience.

Color

To ensure that your app's color scheme is accessible, you must adhere to the WCAG 2.2 AA level requirements. This means that the contrast ratio between text and background should be at least 4.5:1 for normal text (less than 18 point or 14 point bold) and 3:1 for large text (at least 18 point or 14 point bold). Additionally, information conveyed via color must also be available through other means, such as underlined text for links.

Visibility

When it comes to content hiding techniques, you should avoid using methods like zero opacity, z-index order, and off-screen placement exclusively. Instead, use the hidden attribute or visibility, display style properties to ensure that everything other than the currently visible screen is truly invisible. Unless absolutely necessary, the aria-hidden attribute should not be used. Moreover, all activatable elements must be focusable, with standard controls like links, buttons, and form fields being focusable by default. Non-standard controls should have an appropriate ARIA Role assigned to them.

Text Equivalents

To provide equal access for users who rely on screen readers or other assistive technologies, you must provide text equivalents for every non-strictly presentational non-text element within the app. Use alt and title attributes where applicable, and if not, use ARIA States and Properties like aria-label, aria-labelledby, or aria-describedby. Remember to avoid images of text and ensure that all user interface components with visible text (or image of text) as labels have the same text available in the programmatic name of the component.

Handling State

When it comes to handling state changes for custom controls, you should provide these changes via ARIA States like aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed. For standard controls like radio buttons and checkboxes, the operating system will handle state changes. However, for other custom controls, you must ensure that state changes are provided through ARIA States.

Orientation

To ensure that your app is accessible to users in all orientations, you should avoid restricting content to a single orientation (e.g., portrait or landscape) unless it's essential. Examples of when an orientation is essential include piano applications or bank checks.

General Guidelines

To provide a comprehensive and accessible app experience, remember the following general guidelines:

  • Provide an app title
  • Ensure that headings do not break hierarchical structure
  • Use ARIA Landmark Roles to describe your app's structure
  • For touch events, ensure that the down-event does not execute any part of the function; if it does, provide a mechanism for aborting or undoing the action before its completion
  • Make sure that touch targets are large enough for users to interact with

By following these guidelines and best practices, you can create an exceptional app user experience that is accessible to everyone.