WCAG 2.5.1: How to Fix Multipoint and Path-based Gesture Issues

What This Criterion Requires

WCAG 2.5.1 requires that all functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. Multipoint gestures require two or more contact points, such as pinch-to-zoom with two fingers or a three-finger swipe. Path-based gestures require the pointer to follow a specific path, such as swiping in a particular direction, drawing a shape, or dragging along a defined route. For each of these gesture types, an alternative single-point activation must be provided, such as tap, click, double-tap, or long press, that achieves the same result. For example, if a map supports pinch-to-zoom, it must also provide plus and minus buttons for zooming. If a carousel uses swipe gestures to navigate slides, it must also provide previous and next buttons. The exception for essential gestures is narrow and applies only when the gesture itself is the point of the interaction, such as in a drawing or handwriting application.

Why It Matters

Many users with motor disabilities cannot perform multipoint or path-based gestures. Users who operate a touchscreen with a head pointer, mouth stick, or single finger cannot pinch with two fingers or perform multi-finger swipes. Users with tremors or limited dexterity may be unable to follow a specific path accurately for swipe gestures. Users who rely on alternative input devices like switch access or eye tracking can only perform simple single-point actions like click or tap. When functionality is gated behind multipoint or path-based gestures with no alternatives, these users are completely locked out. This criterion was added in WCAG 2.1 specifically to address the growing use of touch gesture patterns in mobile and responsive web design that were creating barriers for users who could not perform these gestures. Providing simple button alternatives alongside gesture controls ensures everyone can access the same functionality regardless of their physical abilities or input method.

Common Failures and How to Fix Them

<div class="carousel" data-touch="swipe">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<script>
  // Only swipe gesture handlers, no button alternatives
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchmove', handleSwipeMove);
  carousel.addEventListener('touchend', handleSwipeEnd);
</script>

<div class="carousel" aria-roledescription="carousel">
  <div class="carousel-controls">
    <button onclick="prevSlide()" aria-label="Previous slide">Previous</button>
    <button onclick="nextSlide()" aria-label="Next slide">Next</button>
  </div>
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<script>
  // Swipe gestures AND button alternatives
  carousel.addEventListener('touchstart', handleSwipeStart);
  carousel.addEventListener('touchmove', handleSwipeMove);
  carousel.addEventListener('touchend', handleSwipeEnd);
</script>

<div id="map" class="interactive-map">
  <!-- Map rendered here -->
</div>
<script>
  const map = new Map('#map');
  // Only pinch-to-zoom enabled, no button controls
  map.enablePinchZoom();
</script>

<div id="map" class="interactive-map">
  <!-- Map rendered here -->
</div>
<div class="map-controls">
  <button onclick="map.zoomIn()" aria-label="Zoom in">+</button>
  <button onclick="map.zoomOut()" aria-label="Zoom out">-</button>
</div>
<script>
  const map = new Map('#map');
  map.enablePinchZoom();
</script>

How to Test

1. Identify all interactions on the page that use multipoint gestures (pinch, two-finger scroll, multi-finger tap) or path-based gestures (swipe, drag along a path) and verify each has a single-pointer alternative.
2. Test carousels, sliders, maps, and image galleries to confirm they have visible button controls (previous/next, zoom in/out) in addition to any swipe or pinch gestures.
3. Try to complete all tasks on the page using only single-point clicks or taps without any swiping, pinching, or dragging to verify all functionality is accessible.
4. Test on a touchscreen device using only one finger with tap gestures to confirm all functionality works without multipoint or path-based gestures.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Framer Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Keyboard Navigation Testing

Related WCAG Criteria

• WCAG 2.5.2
• WCAG 2.5.4
• WCAG 2.1.1