Accessible Drag and Drop Guide
In this tutorial series, you'll learn how to build accessible drag-and-drop interactions. Drag and drop is one of the most inaccessible patterns on the web, and providing keyboard alternatives and screen reader support is essential for inclusion.
1. Accessible Drag and Drop Intro
Why drag-drop must be accessible
2. Drag and Drop Problems
Common accessibility barriers
3. Keyboard Alternative
Keyboard-based move operations
4. Buttons for Move
Move up/down buttons
5. Focus Manipulation
Focus during reorder
6. aria-grabbed
Indicating grab state
7. aria-dropeffect
Indicating drop targets
8. Reorder Lists
Accessible sortable lists
9. Drag Handle
Visible drag handle design
10. Touch Support
Touch-based drag and drop
11. Drag and Drop Testing
Testing drag-drop a11y
12. Drag and Drop Project
Build accessible drag-drop
All 12 topics in Accessible Drag and Drop Guide are published.