0

I am building a web application for use by visually impaired users to explore SVG diagrams via a tactile printout. In order to allow this I need to calibrate the tactile printout to the image on the device. Thus I need to be able to receive the x and y coordinates of a click when using a screen reader, specifically VoiceOver for iOS.

Using Talkback, I would tap and hold until I hear an audible click and then use my second finger to double tap and send clicks to the application itself from that position.

When using VoiceOver, I understand how to send swipes by tap and holding until a triple bell and then swipe. However, I cannot for the life of me find out how to send a positioned click.

On a side note, I am using Hammer.js.

Any ideas?

Thanks

sacko87
  • 143
  • 1
  • 6

1 Answers1

0

As far as I can tell, this functionality was supplanted by the interactive drag-and-drop support added to VoiceOver in iOS 11.

Justin
  • 20,509
  • 6
  • 47
  • 58
  • The problem is that there is nothing to drag and drop. Basically a user would select the relevant image, put the tactile image on their device, enter calibration mode, and tap in top left corner a few times followed by tapping again in the lower right. Then the device and the paper are aligned. What existed prior to iOS 11? I'm currently trying to use iOS 10 on an iPad Air. Thanks. – sacko87 Mar 30 '18 at 15:23
  • I understand, now. You can set the location of a tap in code using `activationPoint`, but to the best of my knowledge, this is not accessible to users. – Justin Mar 30 '18 at 21:26
  • Presumably that isn't, sent to the browser then? Which is the target of the click. – sacko87 Mar 30 '18 at 22:26
  • Apologies, I did not take into consideration that you were working within a web view. This is beyond my usual scope. While I don't know of a way to achieve direct interaction with an SVG rendered in a webview, you _might_ be able to hack around it by [adding numerous focusable elements to the SVG content itself](https://www.sitepoint.com/tips-accessible-svg/). – Justin Mar 31 '18 at 22:38
  • That was a consideration, a sea of 10px buttons, but that seemed... inaccessible. I'll have a word to see if that's a reasonable compromise. Thanks Justin. – sacko87 Apr 01 '18 at 06:37
  • @sacko87 While non-standard and far from ideal, you might consider implementing a direct-interaction mode that adds the faux elements, hiding them otherwise. Maybe users could toggle a button or activate the SVG to enter this mode and scrub on any faux element or toggle the same button again to exit. – Justin Apr 01 '18 at 17:58