Home
/
Guides

Accessible drag-and-drop

Accessibility
UI components
September 13, 2025

Drag-and-drop must support keyboard and assistive technologies. Provide ARIA announcements, clear focus, and alternatives to ensure accessibility.

Overview

Drag-and-drop is a common interaction pattern, from reordering lists to moving items between containers, but mouse-only implementations exclude users who rely on keyboards or assistive technologies.

An accessible approach provides multiple input methods, announces changes clearly, and ensures that all users can complete the same tasks regardless of ability.

Best practices

Guidelines to make drag-and-drop inclusive and accessible.

Provide full keyboard alternatives

Importance:
Critical

Enable pick up, move, and drop using keyboard (for example: Space/Enter to pick up/drop, arrow keys to move, Esc to cancel).

References:

Announce states and results via ARIA

Importance:
Critical

Announce pick-up, movement, and drop results using appropriate roles/props (for example: aria-grabbed, live regions).

References:

Provide clear instructions for assistive tech users

Importance:
Recommended

Offer concise instructions such as “Press space to pick up, arrow keys to move, space to drop.” Provide them near the control and programmatically.

Ensure strong visual and focus indicators

Importance:
Critical

Clearly show the selected item, valid drop targets, and placement preview. Maintain visible focus outlines for all interactive elements.

References:

Offer alternative controls

Importance:
Recommended

Provide “Move up/Move down” buttons or context menus for users who cannot or prefer not to drag.

References:

Common mistakes

Frequent mistakes with drag-and-drop.

Mouse- or touch-only implementations

Importance:
Critical

Keyboard and assistive technology users are blocked from completing tasks.

Not announcing drag state changes

Importance:
Critical

Screen reader users can’t tell what is being moved or where it was dropped.

Overly precise placement requirements

Importance:
Recommended to avoid

Demanding exact pointer control increases difficulty and excludes many users.

No fallback controls

Importance:
Recommended to avoid

Without alternatives, users who can’t drag are completely blocked.

Summary

Key takeaways for accessible drag-and-drop.

  • Provide full keyboard support for pick up, move, and drop.
  • Announce states and results via ARIA roles, properties, and live regions.
  • Maintain strong visual cues and focus indicators for items and drop targets.
  • Offer fallback methods like move buttons or menus.

AI prompts

Ready-to-use AI prompts for design agents. Each scenario is pre-loaded with the UX rules from this guide. Copy, adapt to your context, and generate consistent, well-structured output from the start.

Scenario 1: Reorderable list

Use when users need to drag items to change their order within a single list: tasks, priorities, playlist tracks, or ranked options.

AI prompt 
You are a UX-focused design agent. Design an accessible drag-and-drop reorderable list for [list type: task list / playlist / priority queue].

Rules:
- Full keyboard support required:
  Space or Enter: pick up item
  Arrow Up / Down: move item one position
  Space or Enter: drop item at new position
  Escape: cancel, return item to original position
- ARIA announcements via aria-live="polite" for every state change:
  On pick up: "Grabbed [Item]. Position 3 of 8. Use arrow keys to move, Space to drop, Escape to cancel."
  On move: "[Item] moved to position 2 of 8."
  On drop: "[Item] dropped at position 2."
  On cancel: "Cancelled. [Item] returned to position 3."
- Visual drag state: elevated shadow, slight transparency on dragged item
- Drop zone: highlight valid targets as item passes over them
- Placeholder: show ghost where item will land
- Fallback: "Move up" / "Move down" buttons visible beside each item — not only on hover

Accessibility:
- aria-grabbed="true/false" on draggable items
- Test with VoiceOver and NVDA

Constraints:
- Never build a mouse-only implementation
- Never skip ARIA announcements
- Never require precise pixel-level drop positioning

Scenario 2: Moving items between containers

Use when users drag items from one container to another: kanban columns, folders, user groups, or permission sets.

AI prompt 
You are a UX-focused design agent. Design an accessible drag-and-drop interaction for moving items between containers in [product context: kanban board / file organizer / permission manager].

Rules:
- Keyboard interaction:
  Space or Enter: pick up item
  Tab: move focus between valid destination containers while item is grabbed
  Space or Enter: drop into focused container
  Escape: cancel, return item to source
- ARIA announcements:
  On pick up: "Grabbed [Item] from [Source]. Tab to choose a destination, Space to drop, Escape to cancel."
  On container focus: "Over [Destination]. [N] items. Press Space to drop here."
  On drop: "[Item] moved to [Destination]."
  On cancel: "Cancelled. [Item] remains in [Source]."
- Valid drop targets: visually highlighted (border + background change)
- Invalid targets: show rejection indicator — never highlight them the same as valid targets
- Item counts in source and destination containers update live during drag
- Undo: show toast for 5 seconds after drop — "[Item] moved to [Container]. Undo"

Accessibility:
- Each container: descriptive aria-label
- Drag handle: aria-label="Drag to move [Item name]"
- After drop: focus moves to the item in its new container

Constraints:
- Never highlight valid and invalid targets the same way
- Never lose focus after a drop
- Never skip the undo mechanism
Scroll to top