Aria Dropeffect

title: "aria-dropeffect — Indicating Drop Target Behavior" description: "Learn how to use aria-dropeffect to communicate what happens when an item is dropped on a target: copy, move, execute, link, or none." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

aria-dropeffect tells screen readers what action will occur if an item is dropped on a target: copy, move, execute, link, or none.

## What You'll Learn

How to use aria-dropeffect values and update them dynamically during drag operations.

## Why It Matters

Users need to know what happens when they drop an item. Will it move? Copy? Link? Without this information, users cannot make informed decisions.

## Real-World Use

A user drags a file from one folder to another. The target folder has aria-dropeffect="move". The screen reader announces "Drop target: move to Documents folder."

## aria-dropeffect Values

```html
<!-- Drop zone that moves items -->
<div role="listbox" aria-label="Project tasks"
     aria-dropeffect="move"
     id="task-list-in-progress">
  <h2>In Progress</h2>
  <!-- items here -->
</div>

<!-- Drop zone that copies items -->
<div role="listbox" aria-label="Shared resources"
     aria-dropeffect="copy"
     id="shared-resources">
  <h2>Shared Resources</h2>
</div>

Dynamic Updates

function onDragStart(item) {
  // Update drop targets
  document.querySelectorAll('[aria-dropeffect]').forEach(zone => {
    zone.setAttribute('aria-dropeffect', zone.dataset.defaultEffect);
    zone.classList.add('drop-target-active');
  });
  announce('Drag started. Drop targets available.');
}

function onDragEnd(item) {
  document.querySelectorAll('[aria-dropeffect]').forEach(zone => {
    zone.classList.remove('drop-target-active');
  });
}

function onDrop(zone, item) {
  const effect = zone.getAttribute('aria-dropeffect');
  announce(`${item.getAttribute('aria-label')} ${effect}d to ${zone.getAttribute('aria-label')}`);
}

Common Mistakes

1. No aria-dropeffect on drop targets

Drop targets must communicate their behavior via aria-dropeffect.

2. aria-dropeffect not updated during drag

If the effect changes based on context, update aria-dropeffect when drag starts.

3. Using "none" instead of omitting

Use "none" when the element is not a drop target. Omit the attribute for non-target elements.

4. Multiple drop effects without distinction

If different targets have different effects, communicate each via its own aria-dropeffect.

5. No visual indication of drop targets

Sighted users also need to know where items can be dropped. Highlight drop targets visually.

Practice Questions

1. What are the valid aria-dropeffect values? copy, move, execute, link, and none.

2. What does aria-dropeffect="move" indicate? Dropping the item will move it to the target location.

3. What does aria-dropeffect="none" indicate? The element is not a drop target.

Challenge: Create two drop zones with different effects (copy and move). Update aria-dropeffect and visual styles during drag.

FAQ

Mini Project

Create a task board with two columns (To Do, Done). Use aria-dropeffect="move" on both. Add visual highlight on drag start and aria-live announcements on drop.

What's Next

Learn about Reorder Lists and how to build accessible sortable lists.