cordova-plugin-ionic-webview

cordova-plugin-ionic-webview copied to clipboard

When this plugin is installed in a Cordova project (i.e. it's using WKWebView instead of UIWebView) and the iOS Voiceover screenreader is enabled, the initial accessibility focus of the screenreader after app startup is on a hidden "text field" instead of the content of the Webview. This makes it very confusing for blind users.

Platforms affected: iOS

Expected result: When app is started with Voiceover enabled, or if Voiceover is enabled while app is in foreground, the first element the screenreader should focus on is the first focusable HTML element in the Webview.

Actual result: When app is started with Voiceover enabled, or if Voiceover is enabled while app is in foreground, the first element the screenreader focuses on is an invisible "text field".

Test environment

Test device: iPad Air 2 running iOS 12.2 Plugin version: [email protected] Ionic CLI version: 4.12.0

Notes

• A Cordova iOS app without this plugin (i.e. UIWebView instead of WKWebView) works as expected, i.e. the initial focus is on HTML elements inside the Webview.
• Not sure if it's this plugin or WKWebView itself (maybe a hidden URL address input bar?) that's causing the hidden "text field" to gain initial accessibility focus.
• From what I can see in this SO post it should be possible to set the initial focus on a specified first element. This should be the Webview content in the Cordova iOS app.

Steps to reproduce

Ionic 3 test project

ionic start ionic-test tabs --cordova && cd ionic-test
ionic cordova plugin add cordova-plugin-ionic-webview@latest
ionic cordova platform add ios@latest
ionic cordova run ios

Audio recordings:

• app startup with Voiceover turned on and this plugin present in the app (i.e. WKWebView): http://ge.tt/5lw110w2
• app startup with Voiceover turned on and this plugin NOT present in the app (i.e. UIWebView): http://ge.tt/9OH610w2
• turn on Voiceover after app startup and this plugin present in the app (i.e. WKWebView): http://ge.tt/40c710w2
• turn on Voiceover after app startup and this plugin NOT present in the app (i.e. UIWebView): http://ge.tt/1aEA10w2

Vanilla Cordova test project

cordova create cordova-test && cd cordova-test
cordova plugin add cordova-plugin-ionic-webview@latest
cordova platform add ios@latest
cordova run ios

Audio recordings:

• app startup with Voiceover turned on and this plugin present in the app (i.e. WKWebView): http://ge.tt/3h9D10w2
• app startup with Voiceover turned on and this plugin NOT present in the app (i.e. UIWebView): http://ge.tt/8KGH10w2
• turn on Voiceover after app startup and this plugin present in the app (i.e. WKWebView): http://ge.tt/7CNM10w2
• turn on Voiceover after app startup and this plugin NOT present in the app (i.e. UIWebView): http://ge.tt/6O7Q10w2

I'm having this same problem. The VoiceOver focus seems to be incorrect on nearly every page of my web app and nothing I do to programmatically change focus seems to work. This is not an issue with Android's screen reader--only on VoiceOver.

As OP mentions, there is a way to fix this using UIAccessibilityPostNotification and passing the correct element through--but short of creating a new Cordova plugin to handle this, there doesn't seem to be a way for developers to make use of this native functionality through Ionic.

I've also found a number of other people online that have been experiencing this issue for a number of years, although I don't think they narrowed it down to this plugin:

https://stackoverflow.com/questions/45696195/something-in-the-cordova-angular-ionic-stack-steals-my-focus

https://forum.ionicframework.com/t/ionic-with-voiceover-ios/147768

Here is a hacky workaround others have been using: https://linkedlist.ch/ref/17/