Keyboard Alternative

title: "Keyboard Alternative — Providing Keyboard Access for Drag and Drop" description: "Learn how to provide keyboard alternatives for drag and drop using arrow keys, buttons, and context menus for accessible item reordering." weight: 3 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Keyboard alternatives for drag and drop allow users to move, reorder, and sort items using only the keyboard through arrow keys, buttons, or menus.

## What You'll Learn

How to implement keyboard alternatives for drag and drop that work for all users.

## Why It Matters

WCAG requires that all functionality be operable via keyboard (2.1.1). Drag and drop is not exempt.

## Real-World Use

A user tabs to a draggable item in a list. They press a "Move" button, use arrow keys to select the new position, and press Enter to confirm. The item moves and focus updates.

## Keyboard Alternative with Buttons

```html
<ol aria-label="Sortable todo list">
  <li tabindex="0" role="listitem" aria-label="Task 1: Buy groceries">
    <button aria-label="Move up" class="move-up" onclick="moveItem(this, -1)">Up</button>
    <span>Buy groceries</span>
    <button aria-label="Move down" class="move-down" onclick="moveItem(this, 1)">Down</button>
  </li>
  <li tabindex="0" role="listitem" aria-label="Task 2: Pay bills">
    <button aria-label="Move up" class="move-up" onclick="moveItem(this, -1)">Up</button>
    <span>Pay bills</span>
    <button aria-label="Move down" class="move-down" onclick="moveItem(this, 1)">Down</button>
  </li>
</ol>

JavaScript

function moveItem(button, direction) {
  const listItem = button.closest('li');
  const list = listItem.parentElement;
  const items = Array.from(list.children);
  const currentIndex = items.indexOf(listItem);
  const newIndex = currentIndex + direction;

  if (newIndex < 0 || newIndex >= items.length) return;

  if (direction < 0) {
    list.insertBefore(listItem, items[newIndex]);
  } else {
    list.insertBefore(listItem, items[newIndex + 1]);
  }

  listItem.focus();

  const status = document.getElementById('move-status');
  status.textContent = `${listItem.getAttribute('aria-label')} moved to position ${newIndex + 1}`;
}

Common Mistakes

1. Move buttons not keyboard accessible

Move buttons must be buttons (not divs) and must be focusable.

2. No focus after move

After moving an item, focus must stay on or move to the moved item.

3. No announcement of new position

Screen reader users need to know the item moved and its new position.

4. Move buttons too small

Move buttons need 44x44px minimum touch targets.

5. Single-direction only

Provide both move up and move down controls.

Practice Questions

1. What is the simplest keyboard alternative for drag and drop? Move up and move down buttons for each item.

2. Where should focus go after moving an item? Focus should stay on the moved item so the user can continue moving it.

3. How do you announce the move result to screen readers? Update an aria-live region with the item name and new position.

Challenge: Build a sortable list with move up/down buttons, focus management, and screen reader announcements.

FAQ

Mini Project

Create a sortable task list with 5 items. Each item has Move Up and Move Down buttons. Implement focus management and screen reader announcements.

What's Next

Learn about Buttons for Move and how to design accessible move controls.