• Success Criterion 2.5.7
  • Conformance level AA

Kanban Board Reorderable Only by Drag and Drop

2.5.7 — Dragging Movements

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

Kanban boards / sortable lists movable only by drag (no "move to…" menu, no cut/paste, no arrows).

Example 

<li class="ticket-item" draggable="true" ondragstart="startDrag(event)" ondrop="reorderTicket(event)">
  Section 12, Row A
</li>
<!-- reordering is only possible through the drag handle -->

Why it matters

A buyer trying to rank their preferred seat sections can't reorder the list without a precise, sustained drag.

How to test

Try reordering a kanban board or sortable list via a 'move to.' menu, cut/paste, or arrow buttons instead of dragging: if none exist, it fails.

How to fix

Add move-up and move-down buttons on every sortable row as a drag alternative.

<button aria-label="Move Section 12 up" onclick="moveTicketUp(id)">↑</button>
<button aria-label="Move Section 12 down" onclick="moveTicketDown(id)">↓</button>

Outcome

A buyer clicks the up arrow twice and their preferred section moves to the top of the list.

Who is affected

People with tremor, limited dexterity, or anyone using a device that can't sustain a drag-and-drop gesture.

Learn more

Related scenarios