• Success Criterion 2.5.1
  • Conformance level A

Map or Image Zoomable Only by Pinch Gesture

2.5.1 — Pointer Gestures

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Pinch-to-zoom as the only zoom on maps/images (no +/– controls).

Example 

map.on('load', () => {
  map.touchZoomRotate.enable(); // pinch is the only way to zoom
  // no +/- control is ever added to the map
});

Why it matters

A parent using a mouse on a laptop, or a single finger, can't zoom the map to see which centers are near their address.

How to test

Try to zoom a map/image using +/- buttons instead of pinching: if only pinch-to-zoom is offered, it fails.

How to fix

Keep pinch-zoom for touch users, but always add on-screen zoom buttons as the single-pointer path.

map.addControl(new mapboxgl.NavigationControl({ showZoom: true }));

Outcome

A parent clicks the plus button twice and finds the nearest center without touching the map itself.

Who is affected

One-handed users, people with arthritis who can't pinch, and mouse-only desktop users.

Learn more

Related scenarios