Agent Wranglers

Accessibility Required

Offer a way that needs no dragging

Give every drag a single-pointer alternative, such as buttons. This is WCAG 2.2 criterion 2.5.7 (AA).

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Pair every drag (sliders, sorting, maps) with buttons or inputs that do the same.

Example

<li>
  Task one
  <button type="button" aria-label="Move Task one up">↑</button>
  <button type="button" aria-label="Move Task one down">↓</button>
</li>

How to check

For each feature with drag, a browser test completes the same task with clicks only.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/dragging-movements.