← All examples

Accessibility — keyboard-only sorting

Resortable ships with full keyboard support. Click the list once to focus it, then sort entirely from the keyboard. A screen reader live region (built in) announces each move.

Keyboard reference

↑ / ↓ — move focus between items
Space — select / deselect the focused item
Enter — grab the selected item(s); press again to drop
While grabbed, ↑ / ↓ move the grabbed items
Esc — cancel the grab
Home / End — jump to first / last

Ready. Tab into the list to begin.

How it was wired

import { Sortable } from '../src/index.ts'

// `enableAccessibility` is on by default in v2 — keyboard
// navigation, ARIA attributes, and a screen-reader live region
// are all wired automatically.
new Sortable(document.getElementById('a11y-list'), {
  animation: 150,
  draggable: '.sortable-item',
  enableAccessibility: true,
  focusClass: 'sortable-focused',
  onStart: (evt) => {
    setStatus(`Grabbed: ${evt.item.textContent.trim()}`)
  },
  onEnd: (evt) => {
    setStatus(`Dropped at position ${evt.newIndex + 1}`)
  },
  onSelect: (evt) => {
    setStatus(`Selection: ${evt.items?.length ?? 0} item(s)`)
  },
})

// The built-in live region (`.sortable-announcer`) announces moves
// to screen readers automatically. The visible status panel below
// is just a UI mirror for sighted users.

Built-in: a single shared .sortable-announcer element with aria-live="assertive" is appended to the document when the first accessibility-enabled Sortable initialises. You don't need to add one yourself.