Search code examples
iphonecordovawai-ariavoiceoveriscroll

iPhone - iScroll doesn't work when when VoiceOver is on

I have a Cordova Mobile application which uses iScroll plugin. To my surprise scroll doesn't work when I run the app in VoiceOver mode (three finger swipe up/down gesture). It just reads page 1 of 1 even if the content is existing for more than 2 pages.

Are there any role attributes to make page to scroll ? Please help.

Solution

  • I found that iScroll is using transform CSS property for scrolling. I was able to resolve this issue. May be you can also try the same.

    1. Add below style to your parent div

    -webkit-overflow-scrolling : touch

    1. There is a phone gap plugin to listen for VoiceOver on/off https://github.com/phonegap/phonegap-mobile-accessibility

      // Define a persistent callback method to handle the event function onScreenReaderStatusChanged(info) { if (info && typeof info.isScreenReaderRunning !== "undefined") { if (info.isScreenReaderRunning) { console.log("Screen reader: ON"); // Do something to improve the behavior of the application while a screen reader is active. } else { console.log("Screen reader: OFF"); } } }

      // Register the callback method to handle the event window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, onScreenReaderStatusChanged, false);

    On voiceover ON event you can destroy iScroll(or make useTransform property to false). On voiceover OFF you can re-initiate the iScroll.

    Let me know if it works.