Intro

title: "Accessible Drag and Drop Intro — Why Drag and Drop Must Be Accessible" description: "Learn why drag-and-drop accessibility is critical and how to provide keyboard alternatives that work for all users including screen reader users." weight: 1 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Accessible drag and drop provides keyboard alternatives and screen reader support so users who cannot use a mouse can reorder, sort, and move items.

## What You'll Learn

Why drag-drop is one of the most inaccessible patterns and how to make it inclusive.

## Why It Matters

Drag and drop is used for file uploads, list reordering, kanban boards, and layout builders. Mouse-only drag-drop excludes keyboard users, screen reader users, and users with motor disabilities.

## Real-World Use

A project management tool has a kanban board. Users can drag tasks between columns. A keyboard alternative lets users select a task, choose "Move to In Progress" from a menu, and confirm.

## Drag-Drop Barriers

```mermaid
flowchart LR
  A[Mouse-Only Drag] --> B[Keyboard users blocked]
  C[No Screen Reader Support] --> D[Users cannot identify drag targets]
  E[Complex Gestures] --> F[Users with motor disabilities blocked]
  G[No Feedback] --> H[Users unsure of action result]

Common Mistakes

1. Mouse-only interaction

Drag and drop must work with keyboard as well.

2. No visible drag handle

Users need a clear target to initiate drag. Provide a drag handle.

3. No focus management

After dropping, focus must move to the correct position.

4. No undo capability

Accidental drops need undo functionality.

5. No announcement of drop result

Screen reader users need confirmation of where the item was placed.

Practice Questions

1. Why is mouse-only drag and drop inaccessible? Keyboard users, screen reader users, and users with motor disabilities cannot use mouse-dependent interactions.

2. What is the minimum keyboard alternative for drag and drop? Move up/down buttons or a context menu with move-to-position options.

3. What should be announced when a drag operation completes? The item name and its new position, e.g., "Item 3 moved to position 2."

Challenge: Try using a drag-and-drop interface on a popular website with only a keyboard. Can you reorder items?

FAQ

Mini Project

Find a drag-and-drop interface on a website you use. Identify all accessibility barriers. Write a plan for adding keyboard alternatives.

What's Next

Learn about common Drag and Drop Problems and how to identify accessibility barriers.