Accessible Drag and Drop

Accessible drag and drop provides keyboard and screen reader alternatives for mouse-based dragging interactions. Since drag and drop fundamentally relies on pointer manipulation, accessible alternatives must enable equivalent functionality without dragging.

What Is Accessible Drag and Drop

Drag and drop allows users to move items by clicking, holding, and dragging to a new position. Common uses include reordering lists, moving items between containers, and positioning elements spatially.

WCAG Success Criterion 2.5.7 (Dragging Movements) at Level AA requires that functionality using dragging can be achieved through single pointer actions. This means providing alternatives for users who cannot perform dragging movements.

Keyboard users, screen reader users, and people with motor impairments may be unable to perform drag gestures. Accessible alternatives ensure they can accomplish the same tasks.

How Accessible Drag and Drop Works

Alternative selection mechanism replaces dragging with discrete selection and placement. Users first select an item to move, then select a destination:

1. Select: Keyboard focus on item, activate with Enter/Space to select
2. Visual indication: Selected item shows clear visual state
3. Navigate: Move through potential destinations
4. Place: Activate destination to complete the move

This two-step process provides equivalent functionality without dragging.

ARIA attributes communicate drag and drop state:

• aria-grabbed (deprecated but still used): Indicates whether an element is selected for dragging
• aria-dropeffect (deprecated but still used): Indicates valid drop operations
• Custom aria-describedby instructions: Explain keyboard interaction

Announcements help screen reader users understand available actions and completed operations:

• “Item 3 selected. Use arrow keys to move, Enter to place.”
• “Item 3 moved after item 5.”

Keyboard controls for reordering might include:

• Space/Enter: Select or place item
• Arrow keys: Navigate between items or move selected item
• Escape: Cancel selection

Touch alternatives provide touch-based users with accessible interaction through buttons or menus rather than requiring precise drag gestures.

Key Considerations

• Provide non-dragging alternative for all drag operations
• Enable keyboard selection and placement workflow
• Announce selections and completed operations to screen readers
• Provide clear visual feedback for selected and drop-target states
• Document keyboard controls visibly or in accessible instructions
• Ensure alternatives provide equivalent speed and efficiency
• Test with keyboard and screen reader to verify complete functionality

Common Questions

What pattern works for reorderable lists?

For reordering lists, a common accessible pattern uses arrow keys on focused items to move them within the list. Pressing Up moves the item up; Down moves it down. This provides direct keyboard reordering without selection-then-place.

Screen reader announcements confirm movement: “Item moved to position 3 of 8.” Visual feedback shows the item’s new position.

How should file drop zones work accessibly?

File upload drop zones that accept dragged files must also support standard file input. A visible “Browse files” button or link provides the alternative:

The button triggers standard file selection while the drop zone accepts dragged files for users who prefer that interaction.

Can drag and drop be made fully accessible?

The core dragging gesture cannot be made accessible. The alternative is providing equivalent non-drag interactions that achieve the same result. When alternatives are complete and efficient, the functionality is accessible even though the specific dragging interaction is not.

Summary

Accessible drag and drop replaces mouse dragging with keyboard selection and placement workflows, screen reader announcements, and touch alternatives. The goal is equivalent functionality through accessible interactions rather than making dragging itself accessible.