ARIA-grabbed state is defined to any element of the web page which allows the user to drag it from one portion of the page to another. Read ARIA-dropeffect article to understand how WAI ARIA can be used to define if an element can be grabbed from one portion and drop at another portion of the page.

ARIA-grabbed state has three possible values. True, false and undefined.

  • True: Indicates that the element is selected for a drag and drop operation.
  • False: Indicates that the element supports drag and drop, but is not currently selected.
  • Undefined: Indicates that the element does not support drag and drop.

Identify the drag supporting elements of the page and set aria-grabbed=”false”. This indicates the user that the element can be dragged but currently are not selected for dragging. Roles that best suit for drag and drop operation are listitem and treeitem. When drag operation is defined on HTML tags such as <div> and <span> tags, ensure that they are provided with ARIA roles to define the accurate semantics. Highlighting the elements that can be dragged using CSS helps sighted users in identifying the elements that can be dragged.

Once the element(s) are identified for dragging, allow the users to select the elements for drag operation. Set aria-grabbed=”true” when selected for drag operation. Spacebar for selecting a single element , shift + space for multiple elements in contiguous set and control + space for selecting multiple elements in non-contiguous set.

When the elements does not support the grabbed state aria-grabbed=”undefined” can be used which is a default state.