Operable · 2.5 Input Modalities
All functionality that uses dragging must also be achievable with a single pointer without dragging, such as by tapping or clicking, unless dragging is essential or the function is determined by the user agent and not modified by the author.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Move Warm-up walk to the top of the list with single clicks or taps, without dragging. Then switch to Fails and try again.
Arrange the steps in the order you will do them.
Arrange the steps in the order you will do them.
The tools follow the version you last used.
What happened
Why it passes
Each step has Up and Down buttons, so one click or tap moves it. People who cannot press, hold and move at once, such as head pointer or eye gaze users, can still reorder the plan. Dragging still works too.
Why it fails
The only way to reorder is to press, hold and drag. Someone with a tremor, or who steers the pointer by voice or eye gaze, cannot put the warm-up first.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<ol id="workout" class="sortable"> <li draggable="true">Hill sprints, 10 minutes</li> <li draggable="true">Warm-up walk, 5 minutes</li> <li draggable="true">Cool-down stretch, 5 minutes</li></ol>The script changes the order only when an item is dropped. People who cannot press, hold and move at the same time have no way to reorder the list.
Passes
Live preview
<ol id="workout" class="sortable"> <li draggable="true"> <span id="step-1">Hill sprints, 10 minutes</span> <button type="button" class="move-up" aria-describedby="step-1">Up</button> <button type="button" class="move-down" aria-describedby="step-1">Down</button> </li></ol>Dragging still works, but each step can also be moved one place with a single click or tap.
Passes
Live preview
document.getElementById('workout').addEventListener('click', (e) => { const btn = e.target.closest('button'); if (!btn) return; const item = btn.closest('li'); if (btn.classList.contains('move-up') && item.previousElementSibling) { item.previousElementSibling.before(item); } else if (btn.classList.contains('move-down') && item.nextElementSibling) { item.nextElementSibling.after(item); } btn.focus();});Each click moves the item one place. Moving an element in the page can drop keyboard focus, so the script puts focus back on the button that was pressed.
Fails
Live preview
// Cards change column only when they are dragged and dropped.const board = document.getElementById('board');board.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', e.target.id);});board.querySelectorAll('.column').forEach((col) => { col.addEventListener('dragover', (e) => e.preventDefault()); col.addEventListener('drop', (e) => { e.preventDefault(); col.append(document.getElementById(e.dataTransfer.getData('text/plain'))); });});Dragging is the only way to move a task, so a person who cannot hold a button down while moving the pointer cannot update the board.
Passes
Live preview
<article class="card" id="task-42"> <h3>Order more printer paper</h3> <label for="move-42">Move to</label> <select id="move-42"> <option>To do</option> <option selected>Doing</option> <option>Done</option> </select> <button type="button">Move</button></article>Choosing a column and pressing Move takes only clicks or taps, and the card can still be dragged. Keyboard support alone would not be enough.
Why it matters
People with tremor, limited strength or dexterity, and those using head pointers, eye gaze or speech-controlled mouse emulation, often cannot press and hold while moving a pointer precisely.
W3C: Understanding 2.5.7How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures