Success Criterion 2.5.7
Conformance level AA

Diagram Editor Where Nodes Connect Only by Dragging

2.5.7 — Dragging Movements

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Drag-to-connect diagram/node editors with no click-source-then-target alternative (where dragging isn't essential).

Example

<div draggable="true" class="reorder-handle"></div> <!-- drag-only reordering -->

Why it matters

People with limited dexterity and switch, eye-gaze, or voice users who cannot drag.

How to test

Try connecting nodes in a diagram/flow editor via click-source-then-click-target instead of dragging: if drag is the only method (and isn't essential to the function), it fails.

How to fix

A single-pointer, non-dragging alternative (buttons, menu option, tap) must exist for the drag operation.

<div draggable="true" class="reorder-handle"></div>

<button aria-label="Move item up">↑</button>

<button aria-label="Move item down">↓</button>

Any drag-to-reorder or drag-to-move interaction needs a single-pointer alternative like up/down buttons.

Outcome

On a food-delivery app's order-tracking screen, this barrier is gone for people with limited dexterity and switch — they get the same result as anyone else here.

Who is affected