Accessible Reordering

Reordering interfaces should stay understandable — users need to know what moved, where, and how to undo.

01 — Purpose

Reorder without confusion

Reordering interfaces should remain understandable and operable — users should know what moved, where it moved, and how to undo.

Kanban boards, sortable lists, and priority queues often reorder items silently. Sighted users see the jump; screen reader users may hear nothing. Keyboard users may not be able to reorder at all.

See accessible drag and drop and screen reader announcements.

02 — Principles

Controlled and predictable

Reordering should feel controlled and predictable.

  • keyboard controls — move up, move down, move to position without dragging
  • clear announcements — what moved and its new position in the list
  • visible ordering state — position numbers, handles, or focus on moved item
  • undo path — revert or cancel before commit where order is persisted

03 — Practice

Good reordering accessibility

Support screen readers, keyboard interaction, and touch accessibility.

  • provide explicit “move up” / “move down” buttons per row — not drag-only
  • announce changes via live regions — “Item 3 moved to position 1”
  • move focus with the item or to a sensible anchor after reorder
  • expose list semantics — ol or role="list" with clear item labels
  • large enough touch targets for move controls on mobile

04 — Avoid

Reorder failures

Silent or drag-only reordering excludes users and erodes trust.

  • drag-only interaction — no keyboard or button alternative
  • silent changes — DOM updates with no announcement or focus feedback
  • hidden ordering logic — users cannot tell current rank or total count
  • instant persist without confirmation on destructive reorder side effects
  • reordering that breaks reading order in source without matching visual order

05 — Close

Announce every move

Reorder with keyboard alone, then listen with a screen reader.

Complete a full reorder using only keyboard controls. Confirm announcements, focus position, and undo behaviour. Pair with visible order indicators for sighted users.

See accessible drag and drop, keyboard navigation, and the accessibility QA checklist.