Ad

Javascript: Capture Swipe Gesture Using Ontouchstart With IOS VoiceOver Turned On

We are developing an app which uses swipe gestures left and right to navigate content. For blind users using VoiceOver screen reader, the gesture is stolen by VoiceOver. This is a problem because the swipe gesture is the main feature of our app, and works nicely for blind users (but VoiceOver is needed for some other buttons).

We are developing in HTML5 javascript with Cordova/PhoneGap.

Ideally we would like to disable VoiceOver event trapping or disable VoiceOver within a region (ie a DIV).

Apple iOS is the main target but ideally also it would use standards such as HTML5 ARIA as we want it to work on Android also with other screen readers.

Ad

Answer

We came up with a workaround, which works for our use case. I've pasted the relevant part from my Speaking Email blog about how we achieved this:

The big problem is that VoiceOver takes over the swipe gestures, and a fundamental part of our app is what we call the "email slider" where you navigate emails by swiping left and right.

We managed to solve this by presenting the email slider as an ARIA "tabset", which is a component that happens to be navigated by swiping left and right. We named the tabs by the title of the email (eg "Email from Fred Flintstone") so the user can quickly flip between emails and hear VoiceOver read out the email title. A couple of seconds after the user stops changing tabs (ie swiping left and right), we then trigger our own text-to-speech engine to read out the email content nicely as usual. So we managed to present a swipe left and right interface using VoiceOver and WAI ARIA standards.

Ad
source: stackoverflow.com
Ad