Android talkback incompatible with tap & click

The Ionic tap & click system does not work with Android’s talkback accessibility system (tested on android 4.4 running latest update of talkback). It does not navigate when taping on tabs or other buttons in fact none of the taps seem to register.

I attempted to use data-tap-disabled=“true” on the app and it fixes tap issues but the app no longer scrolls.

I am running Ionic beta 13
Any suggestions?

I don’t know if you are still looking for a solution to this problem but I figured out how to resolve this problem. The reason why you are not able to click anything is because the Talkback accessibility system is reading the DOM before animations are being completed. If you need your application to be accessible then you will need to disable animations. Inject $ionicConfigProvider into the same .config section as your $stateProvider and then added the following line:

$ionicConfigProvider.views.transition('none');

That fixed it for me. There is a plugin for cordova accessibility. You may be able to use that to only disable view transitions when the screenreader is on, but I’ve just removed them altogether.

Can this be addressed by more people because I’ve been working on Accessibility functionality for our app and the only thing I can do to get TalkBack on Android to actually be able to click buttons is to set data-tap-disabled=‘true’ on either the body tag or the individual buttons. After updating to Ionic 1.0.1, I had to stop placing data-tap-disabled=‘true’ on the body tag since that breaks scrolling for the entire app. I’m now going to go through the entire project and add it to each button or clickable item I can find and pray that it doesn’t break anything on either iOS or Android.

Please advise or at least starting addressing Accessibility in further updates.

Hi,

Have you made progress with this? We are supporting Talkback on Android too and having issues as well. I started adding data-tap-disabled as you suggested and things started working better. Just hoping there is a better solution that you might have found.

Thanks,

Chris

I have added the Cordova MobileAccessibility plugin but need to wrap it in a device ready handler. However, it seems I can can’t add a device ready handler inside of config. I injected $ionicPlatform and alternatively did document.addEventListener(“ready”, function() { … }); but that did not work. I also tried injecting $timeout and wrapped the code just to test if I could detect the plugin and that just broke the whole thing. Any insight would be greatly appreciated.

$ionicPlatform.ready(function () {
    if (window.MobileAccessibility) {
        console.log("Mobile Accessibility plugin found.")
        window.MobileAccessibility.isScreenReaderRunning(function (isRunning) {
            console.log("isScreenReaderRunning");
            if (isRunning) {
                console.log("Screen Reader IS Running");
                $ionicConfigProvider.views.transition('none'); // turn off page transitions when TalkBack is running, otherwise TalkBack evaluates the page before the transition is done and results in inaccurate screen reading
            } else {
                console.log("Screen Reader IS NOT Running");
            }
        })
    } else {
        console.log("Mobile Accessibility plugin NOT found.")
    }
    });