Aria Grabbed

title: "aria-grabbed — Indicating Drag State to Screen Readers" description: "Learn how to use aria-grabbed to communicate whether an item is being dragged and its grab state to screen reader users." weight: 6 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

aria-grabbed indicates whether an element is currently being dragged (true), is grabbable but not dragged (false), or if the grab state is undefined.

## What You'll Learn

How to use aria-grabbed to communicate drag state to assistive technologies.

## Why It Matters

Without aria-grabbed, screen reader users have no way to know if an item is currently being dragged or what the drag state is.

## Real-World Use

A user presses a "Grab" button on a list item. aria-grabbed changes to "true". The screen reader announces "Item grabbed." When dropped, aria-grabbed changes back to "false."

## aria-grabbed Implementation

```html
<li id="item1" role="listitem"
    aria-grabbed="false"
    aria-label="Task: Buy groceries. Not dragged.">
  <button aria-label="Grab task" onclick="grabItem(this)">Grab</button>
  <span>Buy groceries</span>
</li>

function grabItem(button) {
  const item = button.closest('[aria-grabbed]');
  const isGrabbed = item.getAttribute('aria-grabbed') === 'true';

  if (isGrabbed) {
    // Release
    item.setAttribute('aria-grabbed', 'false');
    item.setAttribute('aria-label', item.dataset.label + '. Not dragged.');
    announce('Item released');
  } else {
    // Grab
    item.setAttribute('aria-grabbed', 'true');
    item.setAttribute('aria-label', item.dataset.label + '. Currently being dragged.');
    announce('Item grabbed. Use move buttons to reposition.');
  }
}

State Announcement

<div id="drag-status" role="status" aria-live="polite" aria-atomic="true"></div>

Common Mistakes

1. aria-grabbed not updated dynamically

aria-grabbed must change from "false" to "true" when dragging starts and back when it ends.

2. Missing aria-grabbed on draggable items

Draggable items should have aria-grabbed set to indicate their state.

3. No label update with aria-grabbed

Update aria-label when grabbing so screen readers announce the state change.

4. aria-grabbed="undefined" used incorrectly

Use "undefined" only when the grab state is not known. Use "false" for grabbable but not grabbed.

5. No live region for drag announcements

Use a live region to announce grab, move, and drop events.

Practice Questions

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

2. What does aria-grabbed="false" indicate? The item is grabbable but is not currently being dragged.

3. What should you do when an item is grabbed? Update aria-grabbed to "true", update aria-label, and announce the state via aria-live.

Challenge: Create a list of 5 draggable items. Use aria-grabbed to track and announce grab/release states.

FAQ

Mini Project

Create a reorderable list with aria-grabbed state management. Include grab/release buttons and live region announcements.

What's Next

Learn about ARIA Drop Effect and how to communicate drop target behavior.