Testing the accessibility of iOS and Android apps, I use the WCAG 2.1 principles and success criteria as they pertain to more than just web sites. They include Information and Communication Technology (ICT), which includes mobile devices. They provide informative guidance, but do not set specific requirements as they do with the web. I use best practices derived from the WCAG 2.0-2.1 principles, guidelines and success criteria.
The following are examples from an evaluation report.
Both Android and iOS Apps
Page Structure:
What: Each screen should have a title and a descriptive heading. The heading should be the first focus when the screen is displayed or read out by a screen reader. Page structure affects reading order/sequence.
Why: This provides context about the purpose of the screen for the user. While navigating apps using a screen reader, the apps often brings focus to the bottom right button, such as the “Continue” or “Next” buttons in the setup. This suggests to a user that they must select that action, which may lead them to missing all the content in that page. E.g., Access Code.
- 1.3.1: Info and Relationships (A) (for reference)
- 2.4.2: Page Titled (A) (for reference)
- 2.4.6: Headings and Labels (AA) (for reference)
How: Use title attribute to title each page. Use H1-H6 or similar to create a hierarchy of content on your page. The title will be read out to provide high-level context. The title will also be read out as the heading. Focus should be set to the screen/page heading.
Add a Location (Usability and Accessibility)
Issue 1:
What: There is a lot of content on this screen. Mobile devices have limited space, so the content must be prioritized. The map is purely for display purposes and the user cannot select a location via this map.
Why: Although the map has associated meaning with the action that the user is supposed to do, it adds more visual information that a user must consider when figuring out their task. This slows down the process. The map increases the bandwidth required for the device as well, which will vary depending on where the user is located.
- Usability: Aesthetic and Minimalist Design
- 1.1.1: Non-text Content (A) (for reference)
How: Remove the map for the setup process. This will minimize the cognitive load for the user as well as simplify what is being read out with a screen reader.
Issue 2:
What: Missing label for Search text input field.
Why: There is no visual and/or programmatically associated label for this Search form.
How: Add a visual label and/or programmatically associate the label.