Day 63

Group cells for faster VoiceOver navigation

20 Jul 2022

Sometimes you want to prioritise ease of navigation, and that's when configuring isAccessibilityElement to true on a container view makes sense. This is especially true in table/collection views and with complex cells with lots of elements.

Two devices with a Twitter timeline. One of them exemplifies how it would work with VoiceOver if each one of the tweets had the isAccessibilityElement property configured to false. VoiceOver would be able to focus on: name, handle, date, text, options button, comments button, retweet button, like button, share button, etc. Going from one tweet to the next one would easily take 11 swipes to the right. On the second one, each one of the tweets has the isAccessibilityElement configured to true, so a single swipe to the right is enough to get from one tweet to the next one.

Take the example from a tweet (from Day 62's tweet). If the tweet has 9 accessible elements, you'd need 9 swipes to the right to go to the next tweet in the list. But ideally, I single swipe should be enough.

https://x.com/dadederk/status/1549417799746994177

On the other hand, for the detail screen for a single tweet, you want to optimise for ease of access to each one of the elements, instead of navigation. In that case it would be better for the tweet view not to be an accessibility element.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

What is the difference between isAccessibilityElement and accessibilityElementsHidden? The first one makes the view not accessible, but its subviews can still be accessible. The second one hides the view and all its subviews from assistive tech.

If a view has isAccessibilityElement to true, assistive tech won't look for any of its subviews. That means that if there are any buttons inside, they won't be accessible. You can add custom actions to that element though.

If an image does not convey additional information, maybe it's just used to make the UI look more attractive, it makes sense for VoiceOver to skip it. UIKit: set isAccessibilityElement to false. SwiftUI: create a decorative image explicitly.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details