iosgoogle-chromeaccessibilityvoiceover

How do you swipe a DOM element in Chrome when VoiceOver is on?


I am working on an app that has a DOM element in Chrome that is often interacted with through swipes. However when VoiceOver is on, the swipes are navigating to the next and previous UI elements, as it is documented in Supporting VoiceOver in your app.

My question is:

Is it possible to interact with a DOM element through its swiping interface when VoiceOver is on or do you have to avoid swiping altogether?

Thanks!


Solution

  • If a user is interacting with a scrollable area, three-finger swipe gestures are used to scroll the content: https://support.apple.com/en-gb/guide/iphone/iph3e2e2281/ios#ipha9fcf687a

    VoiceOver has a "pass-thru" gesture. You double-tap on the touchscreen with one finger but hold the second tap down until you hear an audio prompt (three tones) indicating that the gesture will now bypass VoiceOver's gesture navigation model. As soon as you lift your finger off the screen, it goes back to VoiceOver's usual navigation mode. It can be used to have finer control over slider values, for example. It might allow you to interact with your web app.

    What a native app would use is the allowsDirectInteraction trait, which essentially allows VoiceOver users to interact with the UI element directly, bypassing VoiceOver's own gesture navigation model. It's used to allow VoiceOver users to interact with handwriting features, signature boxes, musical apps like a piano. I would expect Chrome to use something like this to enable interaction with things like <canvas> elements. https://developer.apple.com/documentation/uikit/uiaccessibilitytraits/1620172-allowsdirectinteraction