2.5.1: Pointer Gestures

Pointer Gestures, part of WCAG 2.1, ensures that functions activated by gestures involving more than one point of contact (e.g., multi-touch gestures) can also be operated using a single pointer (e.g., mouse, stylus, or single-finger touch). This criterion aims to make web content more accessible to users who cannot perform complex gestures, such as individuals with motor impairments.

Importance of 2.5.1: Pointer Gestures Success Criterion

Ensuring that all functions on a website can be operated with a single pointer significantly enhances accessibility. Users with disabilities, such as those with limited dexterity, tremors, or who use assistive technologies, may struggle with multi-touch or complex gestures. By adhering to this criterion, developers ensure that their websites are inclusive and provide a seamless experience for all users. This not only meets legal and ethical standards but also broadens the potential user base, improves user satisfaction, and reduces barriers to accessing content and services online.

Primary Use Cases and Requirements Under Guideline 2.5.1: Pointer Gestures (Level AA)

Zooming In and Out

Multi-Touch Gesture: Pinch to zoom in and out.

Single Pointer Alternative: Provide buttons for zooming.

Implementation:


<div class="zoom-controls">
  <button onclick="zoomIn()">Zoom In</button>
  <button onclick="zoomOut()">Zoom Out</button>
</div>

function zoomIn() {
  document.body.style.transform = "scale(1.2)";
}

function zoomOut() {
  document.body.style.transform = "scale(1)";
}

Swiping to Navigate

Multi-Touch Gesture: Swipe left or right to navigate between slides or pages.

Single Pointer Alternative: Provide arrow buttons for navigation.

Implementation:


<div class="carousel">
  <button class="prev" onclick="prevSlide()">&#10094;</button>
  <button class="next" onclick="nextSlide()">&#10095;</button>
  <div class="slides">
    <!-- Slide content -->
  </div>
</div>

function prevSlide() {
  // Logic to show previous slide
}

function nextSlide() {
  // Logic to show next slide
}

Drawing on a Canvas

Multi-Touch Gesture: Using two fingers to draw on a canvas.

Single Pointer Alternative: Allow drawing with a single pointer.

Implementation:


<canvas id="drawingCanvas"></canvas>

const canvas = document.getElementById('drawingCanvas');
const context = canvas.getContext('2d');
let drawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mousemove', draw);

function startDrawing(e) {
  drawing = true;
  draw(e);
}

function stopDrawing() {
  drawing = false;
  context.beginPath();
}

function draw(e) {
  if (!drawing) return;
  context.lineWidth = 5;
  context.lineCap = 'round';
  context.strokeStyle = 'black';
  
  context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
  context.stroke();
  context.beginPath();
  context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
}

Rotating an Object

Multi-Touch Gesture: Use two fingers to rotate an object.

Single Pointer Alternative: Provide rotate buttons.

Implementation:


<div class="rotate-controls">
  <button onclick="rotateLeft()">Rotate Left</button>
  <button onclick="rotateRight()">Rotate Right</button>
</div>
<div id="objectToRotate"></div>

let rotation = 0;

function rotateLeft() {
  rotation -= 15;
  document.getElementById('objectToRotate').style.transform = `rotate(${rotation}deg)`;
}

function rotateRight() {
  rotation += 15;
  document.getElementById('objectToRotate').style.transform = `rotate(${rotation}deg)`;
}