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
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
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
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
Clearly show the selected item, valid drop targets, and placement preview. Maintain visible focus outlines for all interactive elements.
References:
Offer alternative controls
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
Keyboard and assistive technology users are blocked from completing tasks.
Not announcing drag state changes
Screen reader users can’t tell what is being moved or where it was dropped.
Overly precise placement requirements
Demanding exact pointer control increases difficulty and excludes many users.
No fallback controls
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.
