Drag Handle

title: "Drag Handle — Designing Accessible Drag Handles" description: "Learn how to design accessible drag handles that are visible, keyboard-focusable, and clearly indicate draggable items." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Drag handles provide a clear visual and interactive target for initiating drag operations, and must be keyboard accessible and properly labeled.

## What You'll Learn

How to design drag handles that work for all users including keyboard and screen reader users.

## Why It Matters

Drag handles that are too small, invisible, or lack proper labeling make drag-and-drop inaccessible. Users must be able to identify and activate drag handles.

## Real-World Use

A mobile app has a list with a grip icon on the left of each item. The grip has aria-label="Drag item to reorder". On desktop, a tooltip explains "Drag to reorder."

## Drag Handle Design

```html
<ol aria-label="Sortable list">
  <li role="listitem" aria-label="Item 1: Design homepage">
    <button aria-label="Drag Design homepage to reorder"
            class="drag-handle"
            draggable="true"
            onclick="startDrag(event)">
      <svg aria-hidden="true" focusable="false" width="24" height="24"
           viewBox="0 0 24 24">
        <circle cx="12" cy="6" r="2" fill="#666"/>
        <circle cx="12" cy="12" r="2" fill="#666"/>
        <circle cx="12" cy="18" r="2" fill="#666"/>
      </svg>
    </button>
    <span>Design homepage</span>
  </li>
</ol>

CSS for Drag Handle

.drag-handle {
  cursor: grab;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 4px;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

Common Mistakes

1. Drag handle too small

Minimum 44x44px touch target for drag handles.

2. No aria-label on drag handle

Screen readers need to know the handle's purpose.

3. Drag handle not keyboard focusable

The drag handle must be a button or have tabindex="0".

4. No visual grab cursor

Use cursor: grab to indicate draggability.

5. Touch-action not set

Set touch-action: none on drag handles to prevent browser touch scrolling.

Practice Questions

1. What is the minimum size for a drag handle? 44x44 pixels minimum touch target.

2. How do you indicate an item is draggable? Use a grip icon cursor (cursor: grab), a visible drag handle, and draggable="true".

3. What attribute labels a drag handle for screen readers? aria-label on the drag handle button describing the item and action.

Challenge: Design a drag handle pattern that works on desktop and mobile. Include proper sizing, labeling, and cursors.

FAQ

Mini Project

Create a drag handle component with: grip icon, 44x44px minimum size, aria-label, focus indicator, and grab/grabbing cursors.

What's Next

Learn about Touch Support for accessible drag-and-drop on mobile devices.