• Success Criterion 2.5.7
  • Conformance level AA

Map That Can Only Be Panned by Dragging

2.5.7 — Dragging Movements

Scenario

Setting

A childcare-booking service's scheduling page

What’s wrong

Map panning only by drag (no pan buttons/keyboard).

Example 

mapContainer.addEventListener('pointerdown', startPan);
mapContainer.addEventListener('pointermove', panMap);
// there are no pan arrows and no keyboard support

Why it matters

A parent looking for centers just outside the visible map area can't reach them without dragging the map precisely.

How to test

Try panning a map using on-screen pan buttons or keyboard arrows instead of dragging: if only drag works, it fails.

How to fix

Add directional buttons and arrow-key panning alongside drag support.

<button aria-label="Pan map left" onclick="panMap(-100, 0)">‹</button>
<button aria-label="Pan map right" onclick="panMap(100, 0)">›</button>
mapContainer.tabIndex = 0;
mapContainer.addEventListener('keydown', handleArrowPan);

Outcome

A parent presses the right arrow key and the map shifts to reveal nearby centers.

Who is affected

People with limited hand mobility and switch-access users who cannot perform a sustained pointer drag.

Learn more

Related scenarios