javascript - Detect Swipe (Left and Right) on Page Level - Stack Overflow

admin管理员组

文章数量:1300043

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?

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?

• javascript
• html
• reactjs
• accessibility
• wai-aria

Share Improve this question Follow asked Aug 15, 2019 at 19:14 Aditya ParmarAditya Parmar 1,17911 gold badge1414 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 remandation: 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 remand 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.

I think this question has already been answered on StackOverflow. I think this will be a good link for that https://stackoverflow./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/

本文标签： javascriptDetect Swipe (Left and Right) on Page LevelStack Overflow