CODEWITHSUNDEEP
javascripthtmlreactjsaccessibilitywai-aria
Aditya Parmar
Aditya Parmar

Reputation: 1179

Detect Swipe (Left and Right) on Page Level

I am working with Accessibility. When the users are accessing the phone with voiceover, they use the right swipe and left swipe to reach the element. I am trying to detect swipe on the page level, So based on action and current active element, I can walk through dynamically. How we can detect swipe on webpage level in javascript?

Upvotes: 2

Views: 10183

Answers (2)

QuentinC
QuentinC

Reputation: 14722

The purely technical answer on how to detect sweep has already been given, I have nothing to add.

However, when talking about accessibility, you must keep in mind that sweeps are used by VoiceOver users to navigate in the page and that then you won't reliably detect sweeps with JavaScript because these sweep events are absorbed by VoiceOver when it is active. You can't do anything about it. If VoiceOver is active, events like sweeps won't pass through to your page.

This leads to a second recommandation: because sweeps are absorbed by VoiceOver, VO users will never be able to trigger the action that you have implemented on sweep. So, provide another way to do the same action, for example via a link or button (not another gesture!), otherwise VoiceOver users will have trouble using your site. Don't take another gesture as a replacement, because VoiceOver don't only catch sweeps.

For a better accessibility, I would even recommand to don't use gesture detection at all, unless if you do careful tests. VoiceOver absorb a certain number of gestures, but not all; Talkback also absorb gestures, but not all the same ones; so it may happen that a particular gesture pass through on Androit but not on iOs; it may also happen that some gestures are absorbed in certain contexts but not others (for example depending on what is currently focused). The result is inconsistancy, and confusion for the screen reader user.

For sweep you are probably safe, it is never passed through. For some others I wouldn't be so sure, so better is to test with a few screen readers on several platforms.

Upvotes: 7

kovalyovi
kovalyovi

Reputation: 1039

I think this question has already been answered on StackOverflow. I think this will be a good link for that https://stackoverflow.com/a/23230280/10761768.

In short, you use JavaScript for either the whole page or each element individually as touchstart and touchmove event listeners and use x offset to identify which direction it goes. There is a library HammerJS that provides additional assistance for the gestures and touch reactions. https://hammerjs.github.io/

Upvotes: 1

Related Questions