2.5.7 Dragging Movements

Who it helps

People with tremors or weak grip may not be able to hold down a button while moving the pointer. People using a head pointer, eye tracking or voice-controlled mouse grids also struggle to drag.

How to meet it

• Add move up and move down buttons, or a "Move to" menu, to sortable lists and kanban cards.
• Let people click a point on a slider track to set the value, or add plus and minus buttons beside it.
• For drag-to-upload areas, include a regular file input or button.
• Exceptions: dragging is allowed when it is essential, such as freehand drawing. It is also allowed when the browser provides it unmodified, like a native range input.
• Check that your alternative works with a single pointer; a keyboard shortcut alone doesn't meet this criterion.

Examples

<ul class="sortable">
  <li draggable="true">Write draft</li>
  <li draggable="true">Review</li>
  <li draggable="true">Publish</li>
</ul>

<ul class="sortable">
  <li draggable="true">
    Write draft
    <button type="button" aria-label="Move up: Write draft">Move up</button>
    <button type="button" aria-label="Move down: Write draft">Move down</button>
  </li>
</ul>

<div class="drop-zone">
  <p>Drag files here, or</p>
  <label for="upload">Choose files</label>
  <input id="upload" type="file" multiple>
</div>

Common mistakes

• Offering arrow key support as the only alternative to dragging.
• Hiding the move buttons until hover, so touch users never see them.
• Building a custom slider thumb that only moves by dragging.
• Assuming a library's drag-and-drop component is accessible without checking it.

Related criteria

• 2.5.1 Pointer Gestures
• 2.5.2 Pointer Cancellation
• 2.1.1 Keyboard
• 2.5.8 Target Size (Minimum)

Official W3C explanation of 2.5.7