Accessible Drag and Drop

Drag-and-drop often excludes keyboard and assistive technology users — always provide accessible alternatives.

01 — Purpose

Alternatives to dragging

Drag-and-drop interactions often exclude keyboard and assistive technology users — users should always have accessible alternatives.

Drag gestures feel natural on desktop — but they are not universal. Keyboard users, many touch users, and screen reader users need another path to the same outcome. Critical functionality must never depend entirely on dragging.

See accessible reordering and keyboard navigation.

02 — Principles

Same task, multiple paths

Critical functionality should never depend entirely on dragging.

  • keyboard support — pick up, move, drop, or cancel with standard keys
  • visible state changes — dragging, valid drop target, invalid target
  • clear instructions — how to drag and how to use the alternative
  • alternative interaction methods — buttons, menus, or form-based flows

03 — Practice

Accessible drag-and-drop patterns

Support keyboard users, screen readers, and touch interaction.

  • follow accessible DnD patterns — keyboard grab (Space), arrow keys to move, Space to drop, Escape to cancel
  • use ARIA live regions or announcements when items move — see live regions
  • highlight valid drop zones — visible focus and contrast, not colour alone
  • offer non-drag workflow — “Move to…” menu, reorder buttons, numeric priority field
  • test with screen reader and keyboard only — same result as mouse drag

04 — Avoid

Drag-only exclusion

Mouse-only interaction is an accessibility failure when it blocks core tasks.

  • mouse-only interaction — no keyboard or alternative path
  • hidden drop targets — zones that appear only mid-drag with no AT cue
  • inaccessible gestures — long-press or multi-finger only with no fallback
  • silent drops — item moves with no focus or announcement feedback
  • drag handles with no name — icon-only grip with no accessible label

05 — Close

If drag is optional, ship the alternative first

Design the accessible path, then enhance with drag — not the reverse.

Build reorder, file upload, and assignment flows so they work without drag. Add drag as a convenience for pointer users who want it.

See accessible reordering, ARIA usage, and the accessibility QA checklist.