• 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 

sourceNode.addEventListener('pointerdown', startConnectionDrag);
targetNode.addEventListener('pointerup', completeConnection);
// there is no click-source-then-click-target mode

Why it matters

A restaurant admin who can't hold a precise drag between two nodes can't wire up their custom order-status flow at all.

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

Add a click-to-select-source, click-to-select-target mode as a drag-free way to connect nodes.

sourceNode.addEventListener('click', () => selectAsSource(sourceNode));
targetNode.addEventListener('click', () => {
  if (selectedSource) connectNodes(selectedSource, targetNode);
});

Outcome

An admin clicks one status node, then the next, and the connection appears without dragging.

Who is affected

People with tremor and limited fine motor control who can't sustain a pointer-drag between two small targets.

Learn more

Related scenarios