Day 74

Trap VoiceOver in overlays with accessibilityViewIsModal

31 Jul 2022

VoiceOver accessibilityViewIsModal iOS isModal

When presenting a UI component that overlays the existing UI, you may have found that VoiceOver starts to randomly jump between the overlaid UI and the elements underneath. To avoid that, you can set its accessibilityViewIsModal to true.

An app for reading blog posts. There is an overlay indicating the user that he has read all the free posts for the month and that it needs to become a premium user for unlimited reading. With the accessibilityViewIsModal set to false, which is the default value, VoiceOver would go from elements in the screen from top-left to bottom-right, when navigating by swiping to the right. The result is as if both views were blended providing a very messy and confusing experience where VoiceOver's focus jumps from elements in the article view, to elements in the overlaying view for converting to premium. If accessibilityViewIsModal is set to true, on the other hand, VoiceOver will only focus on elements on that view, treating it as a modal. That's assuming the post view and the convert to premium view, have the same superview.

When setting the accessibilityViewIsModal to true for a view, VoiceOver will ignore its sibling views, treating it as if it was a modal. Useful when presenting custom popups, popovers, modals, action sheets, etc.

https://developer.apple.com/documentation/objectivec/nsobject-swift.class/accessibilityviewismodal

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...

Day 207

Keep VoiceOver in modals with isModal

Have you ever seen VoiceOver randomly focusing on elements of the previous view when presenting a custom modal view? That can be fixed by letting the system know that the presented view is modal in terms of accessibility.

Day 43

image trait unlocks Image Explorer

Images that convey important information should have the .image accessibility trait and provide an alternative text in the accessibility label. "Image" will be added to VoiceOver's utterance and the user will be able to use Image Explorer. Image Explorer is fairly new, introduced just a couple years ago. But if you were appropriately configuring the image trait, users suddenly got this new functionality for free. Isn't that awesome? With VoiceOver on, open Image Explorer by swiping up in an image and double tapping. It lets users find people (with a basic description and positioning in the photo), objects or text in images, using on-device intelligence. It is very cool!

VoiceOver accessibilityLabel iOS

Day 12

Spell out codes with accessibilitySpeechSpellOut

accessibilitySpeechSpellOut asks VoiceOver to speak the sequence of characters. Can be useful for things like promo/reference/authentication codes, phone numbers... it makes more sense to announce each character rather than words and big numbers. Example code in the image: ```swift let codeLabel = UILabel() let attributedLabel = NSAttributedString( string: "BAC1234567D", attributes: [.accessibilitySpeechSpellOut: true] ) title.accessibilityAttributedLabel = attributedLabel ```

VoiceOver accessibilitySpeechSpellOut iOS

← Day 75

Day 73 →