Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 4 OF 8 · Complex widgets and data

Drag and drop alternative

Reorder items with keyboard-accessible controls instead of relying on pointer-only drag.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Check whether drag-and-drop workflows have an operable keyboard alternative.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Use the move buttons to reorder the list. Listen for each button’s purpose.

  1. Design review
  2. QA pass

Current order: Design review, QA pass.

Expected behavior: the same reordering task is possible without pointer drag.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Try to reorder the list with the keyboard.

  1. Design review
  2. QA pass
Hint

A visual drag handle does not create a keyboard-operable reorder control.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective reorder pattern?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective list relies on pointer dragging. Keyboard and many screen reader users cannot perform the reorder task.

Repair

Provide explicit controls such as Move up and Move down, with names that include the item being moved. Announce the resulting order when it changes.

<button type="button">Move QA pass up</button>
<p role="status">QA pass moved to position 1 of 2.</p>

Retest

  • Complete the reorder task using only the keyboard.
  • Confirm each control has a specific name.
  • Confirm the new position is communicated after a move.

Report it

Example: The task list can only be reordered by dragging, with no keyboard-operable move controls.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.