Die Webentwicklung orientiert sich immer stärker an der analogen Welt – und bringt dadurch neue, oft sehr intuitive Interaktionen mit sich. Eine davon: Drag and Drop. Damit lassen sich Elemente einfach mit der Maus verschieben oder sortieren – schnell, direkt, vertraut. Doch so praktisch das klingt, nicht alle Nutzer können diese Funktion problemlos bedienen. Woran liegt das eigentlich? Und müssen wir auf solche Features verzichten, um barrierefrei zu bleiben? Oder geht vielleicht beides – ein barrierefreies Drag & Drop, das tastaturbedienbar und screenreaderfreundlich ist?
Was ist Drag & Drop eigentlich?
Drag and Drop – also „Ziehen und Ablegen“ – ist eine Interaktion, die auf den ersten Blick kinderleicht wirkt. Wir klicken ein Element an, halten es fest, ziehen es an die gewünschte Stelle und lassen es dort wieder los. Diese Geste ist in vielen Bereichen im Einsatz und erinnert stark an den Umgang mit Dingen in der echten Welt: wir heben etwas hoch und legen es woanders wieder ab. Im Idealfall finden wir es dort später auch wieder. Dadurch wirkt das Verschieben von Elementen auch auf einer Website oder App besonders intuitiv.
Im Web wird Drag & Drop in ganz unterschiedlichen Kontexten eingesetzt. Zum Beispiel:
- Ein Preisfilter in einem Onlineshop, bei dem Nutzer per Schieberegler die Preisspanne eingrenzen
- Kartenanwendungen, bei denen man durch Ziehen den Kartenausschnitt verschiebt
- Redaktionssysteme wie WordPress, in denen sich Elemente wie Texte oder Bilder per Drag & Drop neu anordnen lassen. Auch das Kopieren vorhandener Elemente, Dateien und Ordner wird oft so umgesetzt.
Der Ablauf ist dabei immer ähnlich. Ein Element wird per Mausklick oder mit dem Finger angefasst, zielgenau verschoben und anschließend durch das Loslassen der Maustaste oder des Bildschirms abgelegt.
Was es noch über barrierefreie Karten zu wissen gibt, konnten Sie übrigens schon letzte Woche im Artikel über barrierefreie Karten und Navigationssysteme erfahren.
Barrieren erkennen – für wen ist Drag and Drop nicht nutzbar?
Für viele Nutzer funktioniert das reibungslos – doch genau hier beginnt das Problem, wenn man nicht mit der Maus arbeitet. Drag & Drop setzt in der Regel eine präzise Steuerung voraus: Klicken oder Drücken, Halten, Bewegen, Loslassen. Und das alles an der richtigen Stelle. Was wie eine einfache Geste wirkt, ist tatsächlich eine komplexe Abfolge feinmotorischer Bewegungen. Schwierig ist das deshalb vor allem für Menschen mit motorischen Einschränkungen, die keine Maus oder kein Touchpad bedienen können. Sie nutzen entweder nur die Tastatur oder sind auf einfache Maus-Interaktionen angewiesen. Aber auch Menschen mit starken Sehbehinderung, die den Screenreader nutzen, tun sich schwer, wenn Verschiebungen (sollten sie denn überhaupt funktionieren) nur visuell nachvollziehbar sind.
Kurz gesagt: Wer keine Maus und Monitor nutzt – dauerhaft oder situativ – bleibt bei vielen Drag & Drop-Funktionen außen vor. Und das betrifft weit mehr Menschen, als man vielleicht zunächst denkt.
Drag-and-Drop-Features barrierefrei umsetzen
Anforderungen der WCAG 2.2
Wenn es um barrierefreie Drag & Drop-Funktionen geht, liefern die Web Content Accessibility Guidelines (WCAG) 2.2 (englisch) klare Vorgaben. Zwar widmet sich kein Erfolgskriterium ausschließlich dem Drag & Drop, aber gleich zwei Anforderungen sind direkt relevant, sobald Inhalte verschoben werden können.
Erfolgskriterium 2.1.1 – Keyboard (Stufe A) lautet übersetzt und eingekürzt:
Alle Funktionalitäten des Inhalts sind über eine Tastaturschnittstelle bedienbar…
Was bedeutet das in der Praxis? Wenn etwas mit der Maus verschoben werden kann, muss das auch per Tastatur möglich sein. Dazu gehören:
- Das Erreichen des Elements über die Tab-Reihenfolge,
- Die Auswahl, z. B. per Enter- oder Leertaste,
- Die gezielte Bewegung,
- Und das Ablegen an der gewünschten Position.
Ein weiteres, neueres Kriterium ist 2.5.7 – Dragging Movements (Stufe AA). Es verlangt (wieder übersetzt und eingekürzt):
„Alle Funktionen, die zur Bedienung eine Ziehbewegung verwenden, können mit einem einzelnen Zeiger ohne Ziehen erreicht werden.“
Auch hier geht es um Barrieren, insbesondere für Menschen mit motorischen Einschränkungen. Die Forderung ist klar: Ziehen darf keine Voraussetzung für die Nutzung sein. Alternativen müssen so gestaltet sein, dass sie auch mit einfachen Klicks, Tasten oder Touchgesten bedient werden können – ohne komplexe Mausaktionen. Davon ausgenommen sind nur Bewegungen, die man braucht um den Browser selbst zu bedienen (Beispielsweise Wischbewegungen um Touchscreens zu scrollen).
Insgesamt haben wir also zwei wichtige Anforderungen an die Bedienung:
- Die Interaktion muss ohne Ziehbewegung möglich sein.
- Alles was mit der Maus möglich ist, muss auch nur mit der Tastatur gelöst werden können.
Schauen wir uns an, wie was gelöst werden kann.
Tastaturbedienbarkeit gewährleisten
Es gibt eine ganze Reihe an Möglichkeiten, Drag & Drop so umzusetzen, dass auch Nutzer ohne Maus davon profitieren.
Ein häufiger Anwendungsfall sind Schieberegler, etwa bei Preisfiltern oder Lautstärkereglern. Hier können einfach zusätzlich ein oder zwei Eingabefelder den Slider ergänzen, in dem Werte direkt eingetippt werden können. Auch der Regler selbst kann mit der Tastatur bedienbar sein – etwa durch Fokus und Pfeiltasten. Der Range-Input im HTML-Standard (englisch) unterstützt das schon von Haus aus. Mit etwas zusätzlichem JavaScript werden beide Eingabemöglichkeiten miteinander gekoppelt.
Ein weiteres gängiges Konzept: Buttons mit Auf- und Ab-Pfeilen, um die Reihenfolge von Elementen zu ändern. Anstatt ein Element zu ziehen, kann man es so gezielt nach oben oder unten verschieben, wenn der Button angeklickt wird. Das ist besonders in Formularen oder Redaktionssystemen beliebt – und sorgt nebenbei für mehr Übersicht.
Sortiere doch einmal das folgende Lied
- Vögel alle
- sind schon
- da, alle
- Alle Vögel
Wer Drag & Drop möglichst nah an der gewohnten Mausinteraktion nachbilden will, kann eine Zwei-Schritt-Logik nutzen: Ein Element wird per Tastatur „gepackt“, mit Pfeil- oder Tab-Steuerung an die Zielposition gebracht und dort wieder abgelegt. Technisch ist das anspruchsvoller – aber aus Nutzersicht sehr elegant, wenn Fokusführung und ARIA-Rollen sauber umgesetzt sind. Ergänzen Sie aber am Besten eine kurze Bedienungsanleitung.
Im folgenden Beispiel sortieren Sie die Elemente mit den Cursor-Tasten.
- Star
- Amsel
- Fink
- Drossel
Und manchmal lohnt sich auch ein Perspektivwechsel: Warum nicht per Kontextmenü oder Auswahlfeld sortieren? Oder eine separate „Sortieren“-Ansicht anbieten, in der Elemente ganz ohne Ziehen umgeordnet werden können – zum Beispiel mit Nummerneingaben oder Drop-Downs. Elemente lassen sich auch über die Zwischenablage kopieren und woanders wieder einfügen.
Auch für Screenreader geeignet – die richtigen ARIA-Rollen und ARIA-Attribute
Screenreader-Nutzer stehen bei Drag & Drop vor einer doppelten Herausforderung. Zum einen fehlt ihnen die visuelle Rückmeldung über die Bewegung eines Elements. Zum anderen sind Drag-&-Drop-Aktionen oft nicht semantisch beschrieben – also weder über die zugrundeliegende HTML-Struktur noch über ARIA-Rollen ausreichend nachvollziehbar. Ohne zusätzliche Hinweise bleibt die Aktion für assistive Technologien schlicht unsichtbar.
Standard-HTML bietet kaum Unterstützung für Drag & Drop, das <li draggable="true">-Attribut allein sagt einem Screenreader nicht, was das Element kann, wie es bewegt wird oder welchen Zustand es gerade hat. Die Lösung liegt in gezielt eingesetzten ARIA-Rollen und -Attributen, die das fehlende semantische Gerüst ersetzen.
Damit Drag & Drop für Screenreader verständlich wird, sollten folgende Punkte umgesetzt werden:
- Verwendung Listen oder
role="list"undrole="listitem", um die Struktur als sortierbare Liste zu kennzeichnen. - Ergänzung von
aria-roledescription="sortierbares Element", um den Nutzer:innen zu vermitteln, dass sich Elemente bewegen lassen. - Jedes Element sollte ein
aria-labeloderaria-labelledbybekommen, das Inhalt und aktuelle Position beschreibt, z. B. „Alle Vögel, Position 3 von 4“. - Die Steuerbuttons (z. B. „nach oben“ und „nach unten“) brauchen klare
aria-label-Texte, aus denen die Aktion und das Ziel hervorgehen: „Alle Vögel nach oben verschieben“. - Bei komplexeren Interaktionen kann eine
aria-live-Region sinnvoll sein, um Veränderungen wie „Element wurde auf Position 2 verschoben“ unmittelbar anzusagen.
Wichtig ist: Screenreader-Nutzer brauchen nicht nur Zugriff auf die Funktionalität, sondern auch transparente Informationen darüber, was passiert – idealerweise in Echtzeit.
Fazit – Drag & Drop mit Alternativen nutzen
Drag & Drop ist eine beliebte Interaktion, die Inhalte intuitiv beweglich macht – aber leider oft auch unbedacht Barrieren schafft. Wer nur mit Tastatur oder Screenreader unterwegs ist, steht schnell vor einer unlösbaren Aufgabe.
Die gute Nachricht: Barrierefreiheit und Interaktivität schließen sich nicht aus. Mit durchdachter Tastatursteuerung, klaren Alternativen und den richtigen ARIA-Attributen wird aus einem rein visuellen Feature ein zugängliches Element für alle. Dabei muss man nicht einmal auf Drag & Drop verzichten – man muss es nur ergänzen und erklären.
Barrierefreiheit bedeutet nicht immer „weniger Funktion“, sondern oft einfach besser durchdachte Bedienbarkeit. Wer das berücksichtigt, baut Anwendungen, die für mehr Menschen funktionieren – ganz ohne Stolperfallen.