Over the last few years, I have been asked more and more "Mark, what are the most common issues in mobile applications". Normally I would respond with what I know, however lately I have began to ask myself "What is the current state of mobile accessibility" and "are the common issues still the same?"
Flash forward to the spring, in which I did a workshop for an accessibility conference called AccessU (If you haven't heard of it check it out because it is awesome!). The workshop was titled "Simplifying Mobile Accessibility", where we take the complex topic of accessibility in mobile and break it down so everyone can easily fix the bulk of their issues.
For this workshop, I decided to do my own personal study of 10 iOS and Android mobile applications to see what were the most common accessibility issues in those applications, and what are general trends between all of the apps.
Now, its time to share some of that information with you all, lets dive in to the top 5 iOS application accessibility issues!
The Study
Before I dive into the issues, I wanted to take a moment to explain the different applications I tested and how I tested them. Do know, for the purposes of this article I will not share the EXACT name of the applications in the study, just the industry/category they are in.
When deciding the 10 applications to test, I chose 3 retail applications, 3 food or food service applications, 3 travel applications and 1 social media applications. To pick which ones of each category, I simply went to the app store and pick the top ones listed.
For testing of each application, I tested with Voiceover, Voice Control, Switch Control and Enlarged font sizes. For those wanting to know how to test with each I have linked resources right here:
The Issues
Whew, okay finally we can get into the meat of this article; the issues! Lets dive into the first couple of commons issues seen in the sample of applications tested!
Missing Traits
This one may come as no shock to anyone reading this, however around 26% of the total issues found, where actionable items missing a proper trait. For those not familiar with iOS, think of a traits as the roles for particular items (like ARIA roles in web).
Many items that were actionable were missing button or link traits, which makes it impossible for Voiceover and Voice Control users to know if the item has an action tied to it!
Remediation Tips
First and foremost, if you can use semantic/native elements, USE THEM!! Anytime you use a text element or elements that are not native elements, you do not get the accessibility baked in with it.
Second, if you must use an element that is not native/semantic then you can do something similar to the following to add a trait to the element to get it to announce properly.
Text("A11y is Awesome")
.onTapGesture {print("The gesture tapped")}
.accessibilityAddTraits(.isButton)
You can also remove traits and then add a trait back to an element. For example, if you use an image and make it actionable but want it announce as "button".
Image(systemName: "heart")
.accessibilityRemoveTraits(.isImage)
.accessibilityAddTraits(.isButton)
Improper Grouping of Content
Coming in with around 20% of the issues found, Improper grouping of content. This one may confuse folks a little. What does Mark mean when he says "improper grouping of content"? In iOS applications you can create rows of content and have the whole item be tappable (think the iOS settings menu). You can also create components such as cards that can have multiple different pieces of information in them.
By default, when creating components such as these each individual item is accessible one by one for voice over users. This causes a very frustrating experience when navigating complex applications. So what's the solution? Group similar content together to make each accessibility focus point clear and concise for the user.
Bad example:
In this example, we have a product with an image then under that the name, the price and price per. Notice in this example, that each individual item in the component gets an accessibility focus which is cumbersome for Voiceover users
Good Example:
In this example photo, which is the same layout as above, the item is grouped together as one accessibility focus stop that allows for easy navigation and consumption of information!
Remediation Tips
To group content, it is relatively simple. Take the component or content that needs to be grouped and group it using the .accessibilityElement(children: .combine).
VStack {
Text("Dunkin Donuts Coffees")
Text("Price: $5.00")
Text("Quantity: 2")
}
.accessibilityElement(children: .combine)
In Summary
This is only part 1 of the top 5 issues in iOS applications, there are still 3 more issues to cover! However, if you are a mobile developer take the time to look at your application for the two issues discussed in this article and see if your app has them. If they do, fix em up! Accessibility only helps extend the reach of your application so why not take the time to make it usable for all?
Top comments (1)
Thanks for sharing your knowledge. I am looking forward to Part 2.