Buttons For Move

title: "Buttons for Move — Accessible Move Controls for Drag and Drop" description: "Learn how to design accessible move buttons with proper labels, focus management, and screen reader announcements for reorderable lists." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, drag-drop]

Move buttons (Move Up, Move Down, Move To) provide an accessible alternative to drag and drop with clear labels and predictable behavior.

## What You'll Learn

How to design accessible move button controls for reorderable lists and grids.

## Why It Matters

Move buttons are the most predictable and reliable alternative to drag and drop. They work with keyboard, screen reader, and switch devices.

## Real-World Use

A playlist editor shows songs with Move Up and Move Down buttons. A screen reader user tabs to the "Move Down" button on song 3, presses Enter, and the song moves to position 4. Focus stays on the song.

## Move Button Pattern

```html
<ol aria-label="Playlist" role="list">
  <li role="listitem" aria-label="Song 1: Bohemian Rhapsody">
    <button aria-label="Move Bohemian Rhapsody up"
            class="move-btn up"
            onclick="moveSong(0, -1)"
            ${index === 0 ? 'disabled' : ''}>
      <svg aria-hidden="true" focusable="false" width="16" height="16">...</svg>
    </button>
    <span class="item-label">Bohemian Rhapsody</span>
    <button aria-label="Move Bohemian Rhapsody down"
            class="move-btn down"
            onclick="moveSong(0, 1)"
            ${index === last ? 'disabled' : ''}>
      <svg aria-hidden="true" focusable="false" width="16" height="16">...</svg>
    </button>
  </li>
</ol>

Move To Dialog

<button aria-label="Move item to position" onclick="openMoveDialog(this)">
  Move to...
</button>

<div role="dialog" aria-labelledby="move-title" id="move-dialog" hidden>
  <h2 id="move-title">Move item to position</h2>
  <label for="position-select">Position</label>
  <select id="position-select">
    <option value="1">1 (top)</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4 (bottom)</option>
  </select>
  <button onclick="confirmMove()">Move</button>
  <button onclick="closeDialog()">Cancel</button>
</div>

Common Mistakes

1. Icon-only buttons without labels

Move buttons need aria-label describing the action and the item name.

2. Disabled buttons without explanation

Disabled Move Up at the top is expected. Disabled buttons still need accessible names.

3. Buttons not adjacent to items

Each item should have its own move buttons. Global move controls are confusing.

4. No keyboard shortcut for move

Offer keyboard shortcuts like Alt+Arrow keys for power users.

5. Move buttons not focusable when disabled

Disabled buttons should not be focusable. Use aria-disabled="true" if they remain focusable.

Practice Questions

1. What should the aria-label of a move button include? The action (move up/down) and the item name for context.

2. When should the Move Up button be disabled? When the item is at the first position in the list.

3. What is the advantage of a "Move to..." dialog over individual buttons? It lets users jump to an exact position instead of stepping through each position.

Challenge: Build a playlist with 10 songs. Each song has Move Up, Move Down, and Move To buttons. Implement all three.

FAQ

Mini Project

Create a reorderable list with Move Up, Move Down, and Move To controls. Implement proper labeling, disable states, and focus management.

What's Next

Learn about Focus Manipulation during drag-and-drop and reorder operations.