Use single-pointer gestures (instead of path-based gestures)

Comparison of single-pointer and path-based gestures
Image description: Accessible and inaccessible comparison of gestures. In the accessible example, a hand presses on a button. Text below says, "Tap, double tap, long press." In the inaccessible example, a hand is dragging an orange circle to the right. Text below says, "Pinch to zoom, drag and drop."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Single-pointer gestures (such as tap or long press) are accessible to people with motor disabilities.

Path-based gestures, such as drag and drop or pinch to zoom, require precision in order to work. People with motor disabilities may not have the level of precision or control required in order to make these gestures. They can also lead to a great amount of human error, which feels frustrating and could lead to serious consequences if error recovery is not available.

Therefore, use single-pointer gestures as the default interaction. If there are interactions that feel more intuitive as a path-based gesture (such as swipe left or right), then make sure that a single-pointer alternative is also available.

This references WCAG criterion 2.5.1 Pointer Gestures (Level A).

How to Implement This

Alternatives to Path-Based Gestures

For any path-based gesture, there is a single-pointer alternative that you can use in addition to or instead of the path-based gesture.

For zooming in/out, you can use plus and minus icon buttons as the single-pointer alternative. You can also use the toolbar controls to add zoom in, zoom out, and other view-related controls under the view menu.

Comparison of pinch to zoom with single-pointer alternatives (zoom buttons and view menu options).
Image description: Comparison of a path-based gesture vs. single-pointer. The path-based gesture, pinch to zoom, shows the movement of the thumb and pointer finger moving outward. The single-pointer gesture shows zoom buttons (a plus sign, minus sign, and frame icon) and the view menu (which displays a list of items: zoom in, zoom out, and zoom to 100%).


For swiping left or right, you can use arrow icon buttons on either side.

Comparison of swipe with single-pointer alternative (arrow buttons).
Image description: Comparison of a path-based gesture vs. single-pointer. The path based gesture, swipe, shows the movement of the pointer finger pressing down and swiping right. The single-pointer gesture shows arrow buttons for left and right.


For drag and drop, there are a few alternatives you can consider depending on the functionality. If the goal is to reorder a list of items, you can consider using arrow buttons to move an item up and down a list or assign a manual order through a number input. If the goal is to match different items with each other, you can consider a “tap to select” interaction so that users can tap the items they wish to match.

Interesting Further Reading

How to Test This

Manually interact with the website/app and go through all the main user flows. Make note of any interactions that require a path-based gesture.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.