Accessible Drag-and-Drop: Kanban Boards, Sortable Lists & Keyboard Alternatives

Drag-and-drop interfaces are ubiquitous in project management Kanban boards (Trello, Jira), file uploaders, and reorderable dashboard widgets. However, mouse-only drag interactions completely exclude blind users, users with tremors, and switch-device operators. WCAG 2.2 Success Criterion 2.5.7 (Dragging Movements - Level AA) requires that all dragging operations offer a single-pointer and keyboard alternative.

Understanding WCAG 2.5.7 Dragging Movements

Under WCAG 2.5.7, any functionality that requires dragging an element from one point to another must be achievable by a single pointer without dragging (e.g. clicking a button to reorder or select a destination from a dropdown menu).

The Keyboard Movement Pattern (Space to Lift, Arrows to Move)

The accessible keyboard interaction standard for sortable lists and Kanban cards operates as follows:

Live Region Status Updates for Position Changes

Whenever a card position changes via keyboard, an `aria-live="polite"` region must announce:

"Lifted task: Update SSL Certificates. Current position: In Progress, item 2 of 4. Use arrow keys to reorder, Space to drop."

Menu-Based Spatial Alternatives: 'Move to Column'

Alongside keyboard arrow controls, provide an explicit action button on each card opening a dropdown menu with explicit choices: Move Up, Move Down, Move to In Progress, Move to Done.

Accessible Kanban Card Implementation

<div 
  class="kanban-card" 
  tabindex="0" 
  role="button" 
  aria-describedby="card-instructions" 
  aria-label="Bug Fix: Checkout modal accessibility">
  <h4>Bug Fix: Checkout modal accessibility</h4>
  <div class="card-actions">
    <button type="button" class="btn-move" aria-haspopup="menu" aria-label="Move card">⋮</button>
  </div>
</div>
<span id="card-instructions" class="sr-only">
  Press Space to lift, arrow keys to move, Space to drop, Escape to cancel.
</span>