aria-grabbed — Indicating Drag and Drop State

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-grabbed indicates whether a draggable element is currently being grabbed for drag and drop operations, helping screen reader users understand drag interaction state.

In this tutorial, you'll learn how to use aria-grabbed in ARIA drag and drop.

What You'll Learn

By the end of this lesson, you'll understand how aria-grabbed communicates drag state, how to pair it with aria-dropeffect, and accessible drag and drop patterns.

Why It Matters

Drag and drop is inherently inaccessible to keyboard and screen reader users. ARIA attributes at least communicate the state and available drop targets.

Real-World Use

Durga Antivirus Pro's quarantine interface uses aria-grabbed and aria-dropeffect for moving files between scan lists.

Drag State Flow

flowchart LR
  A[User activates drag] --> B[Set aria-grabbed='true' on source]
  B --> C[Indicate drop targets with aria-dropeffect]
  C --> D{User drops on valid target?}
  D -->|Yes| E[Move item, remove aria-grabbed]
  D -->|No| F[Cancel, remove aria-grabbed]
  E --> G[Announce: Item moved]
  F --> H[Announce: Drag cancelled]

How aria-grabbed Works

aria-grabbed is set on the draggable element:

<div role="listbox" aria-label="Quarantined files">
  <div role="option" aria-grabbed="false" tabindex="0">
    malware.exe
  </div>
  <div role="option" aria-grabbed="false" tabindex="0">
    virus.doc
  </div>
</div>

When the user starts dragging:

element.setAttribute('aria-grabbed', 'true');

The screen reader announces "malware.exe, grabbed".

aria-grabbed Values

<div aria-grabbed="false">Draggable item (idle)</div>
<div aria-grabbed="true">Draggable item (being dragged)</div>

Keyboard Drag and Drop

For full Accessibility, implement keyboard-based drag and drop:

function startKeyboardDrag(element) {
  element.setAttribute('aria-grabbed', 'true');
  dropTargets.forEach(target => {
    target.setAttribute('aria-dropeffect', 'move');
  });
}

function endKeyboardDrag(element, target) {
  element.setAttribute('aria-grabbed', 'false');
  dropTargets.forEach(t => t.removeAttribute('aria-dropeffect'));
  // Move the element
}

Common Mistakes

• Using aria-grabbed without keyboard support: Drag and drop must be keyboard accessible.
• Not resetting aria-grabbed after drag ends: Stale grabbed state confuses users.
• Using aria-grabbed on non-draggable elements: Only use it on elements that support drag.
• Forgetting to indicate drop targets: Pair with aria-dropeffect on valid targets.
• Not announcing drag outcomes: Tell users whether the drop succeeded or was cancelled.

Practice and Challenge

1. What does aria-grabbed="true" mean? The element is currently being dragged.

2. What attribute pairs with aria-grabbed to indicate drop targets? aria-dropeffect.

3. What is the default value of aria-grabbed? false.

4. Why must drag and drop have keyboard support? Because screen reader users and keyboard-only users cannot use mouse drag.

5. Challenge: Create a simple drag and drop list where items can be reordered. Use aria-grabbed and implement keyboard-based reordering.

FAQ

Mini Project

Build a reorderable list where items can be moved up and down with keyboard buttons. Use aria-grabbed to indicate the actively moving item. Announce position changes.

What's Next

Continue to aria-dropeffect to learn about drop target behavior.