Accessibility (Voice over ) and iOS 8 safari - events
Question
This is regarding events when accessibility is switched on.
The code is like this; when accessibility is switched on and touch event get registered events are not firing. If I don't register touch events then everything is working fine.
Am I missing anything?
This code is working iOS 7 and below, but the problem is only iOS 8 and above (up to latest version).
<html > <head> <meta name=viewport content="width=device-width, initial-scale=1"> <title></title> <style> .displayTable{ display:table; table-layout:fixed; border-collapse:collapse; } .displayRow{ display:table-row; } .displayCell{ display:table-cell; white-space:nowrap; } </style> </head> <body> <div id="outparent"> </div> <script> var p1 = document.getElementById('outparent'); function enableTouchEvents() { p1.addEventListener('touchstart', onTouch); p1.addEventListener('touchmove', onTouch); p1.addEventListener('touchend', onTouch); } function removeTouchEvents() { p1.removeEventListener('touchstart', onTouch); p1.removeEventListener('touchmove', onTouch); p1.removeEventListener('touchend', onTouch); } function render() { var str = '<form id="form"> \\ <div id="inparent"> \\ <div style="table-layout:fixed;display:table" > \\ <div style="display:table-row" >\\ <div style="display:table-cell"> \\ <input id="b2" value="submit me!" type="submit" /> \\ </div></div> \\ <div style="display:table-row">\\ <div style="display:table-cell"> \\ <input id="b1" value="click me!" type="button" /> \\ </div></div> \\ </div> \\ </div> \\ </form>'; p1.innerHTML = str; } p1.addEventListener('click', function (e) { //console.log('out clicked ' + e.target.id); alert('you clicked on ' + e.target.id); e.preventDefault(); }); function onTouch(e) { console.log('event type ' + e.type + ' ' + e.timeStamp); } render(); // comment this everything works fine. enableTouchEvents(); </script> </body> </html>
1 answers
solution1
0 2019-11-14 05:28:23
You shouldn't rely on touch events.
When VoiceOver is on, the general behavior of the device is altered: a single touch speaks the element; a double tap activates the element; a sweep left or right move to the previous/next element; etc. VoiceOver intercepts touch events and do appropriate work. As a consequence, touch events aren't forwarded to your script as usual.
Some are never forwarded, some are but in a erratic way or unusual order, some are only forwarded after having done the passthrough gesture (double long tap). If you really want to use touch events and make them well work when VoiceOver is on, you must carefully test. Probably the best is to stay away from touch events altogether.
If you are adding custom behaviors such as sweep left/right to go to previous/next slide, rotation, zoom, etc. you must provide another alternative to trigger these actions, such as clicking on buttons, because VoiceOver users won't be able to use them otherwise.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.