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

You may also find interesting...

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.

With VoiceOver, you can swipe up/down to increase/decrease the value of adjustable components. You need to implement accessibilityIncrement() and accessibilityDecrement() accordingly, and configure an accessibility value that makes sense. Example code in the image: ```swift override func accessibilityIncrement() { guard value < 5 else { return } value += 1 accessibilityValue = "\(value) of 5" sendActions(for: .valueChanged) } override func accessibilityDecrement() { guard value > 1 else { return } value -= 1 accessibilityValue = "\(value) of 5" sendActions(for: .valueChanged) } ``` Links to the official documentation: * accessibilityincrement() * accessibilitydecrement()

With accessibilityRepresentation(representation:), you can create a custom component and it can be perceived by assistive technologies as the view you pass as representation. No need to manually configure accessibility attributes. It is one of the most interesting additions to SwiftUI to help you develop accessible UI components. If your custom component behaves similarly to a native one, this is the way to go. https://developer.apple.com/documentation/swiftui/view/accessibilityrepresentation(representation:)

Created in Swift with Ignite.

Supporting Swift for Swifts