• Success Criterion 2.1.1
  • Conformance level A

Drag-and-Drop Feature With No Keyboard Alternative

2.1.1 — Keyboard

Scenario

Setting

A government tax-filing portal

What’s wrong

Drag-and-drop as the only way to reorder/upload/move (no keyboard alternative) where endpoints — not path — matter.

Example 

<ul id="doc-list">
  <li draggable="true" ondragstart="drag(event)">W-2.pdf</li>
  <li draggable="true" ondragstart="drag(event)">1099-INT.pdf</li>
</ul>
<!-- reordering only works through HTML5 drag events; there is no other way to move an item -->

Why it matters

A filer using only a keyboard can upload documents but can never reorder them, and a wrong order can attach income forms to the wrong line.

How to test

Tab to a reorder/upload/move feature and try arrow keys or a menu: if dragging with a mouse is the only way to complete it, it fails.

How to fix

Since only the endpoints of a reorder matter, not the drag path, move-up and move-down buttons satisfy the same task without a pointer.

<li draggable="true" ondragstart="drag(event)">
  W-2.pdf
  <button onclick="moveUp('W-2')" aria-label="Move W-2 up">↑</button>
  <button onclick="moveDown('W-2')" aria-label="Move W-2 down">↓</button>
</li>

Outcome

A filer moves a document up the list with two button presses instead of a mouse drag.

Who is affected

Keyboard-only users and switch-access users can select a document but have no way to move it up or down the list.

Learn more

Related scenarios