Skip to content
EUID Audit service & seal, Home
Get your website audited

This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

Accessibility

Why does drag-and-drop need a simple click alternative?

Every function that requires a drag movement — dragging a file into a field or moving a slider, for instance — needs an alternative with simple clicks or taps. Anyone who can only tap briefly, but can't hold a finger or mouse button down while moving it, fails at pure dragging. Criterion 2.5.7 "Dragging Movements" is new with WCAG 2.2 and closes exactly this gap.

Making file upload, sliders, and sortable lists accessible

Three patterns cover most cases. Drag-and-drop file upload needs a "Choose file" button alongside it that opens the normal file dialog — most systems already include it, it just mustn't be designed away. A slider, for a price range say, needs input fields or plus and minus buttons for the same values alongside it. And sortable lists, where entries are reordered by dragging, need "move up" and "move down" buttons for each entry. The drag gesture stays available as a convenient route; what matters is that the same purpose is also reachable with individual clicks.

How the audit service reports this criterion

Whether every drag function on your page has a click alternative can't be reliably decided by machine: the check would have to actually perform drag movements and compare their effect against all buttons — our measurement engine deliberately works passively and doesn't perform drag movements on other people's pages. The audit report therefore openly marks the criterion as a manual check point. That follows our basic principle: every WCAG criterion appears individually in the report — passed, violated, needs manual review, or not automatable. An empty check counts as a failure, never as a free pass.

Examples

Sort only by pull

Not met
<li draggable="true">Aufgabe A</li>
<li draggable="true">Aufgabe B</li>
Passes
<li draggable="true">Aufgabe A
  <button type="button" aria-label="Aufgabe A nach oben">↑</button>
  <button type="button" aria-label="Aufgabe A nach unten">↓</button>
</li>

Drawing requires a steady hand over a path. One click per direction achieves the same.

  • Gather all the drag functions on your website: file upload, sliders, sortable lists, movable tiles.
  • Add a "Choose file" button next to every upload field that opens the normal file dialog.
  • Add input fields or plus and minus buttons for the same values to sliders.
  • Give sortable lists move-up and move-down buttons for each entry.
  • Test every one of these functions once without any dragging at all — using only individual clicks.

Deutsche Fassung dieser Seite

  • Seal Digitale Barrierefreiheit
  • Seal Daten & Recht
  • Seal Technische Qualität
  • Seal Digital Excellence
  • Seal Cyberversicherung

Audited. For a better digital future.euid.com