Heute geht es um Drag-and-Drop-Funktionen, also das Verschieben von Elementen. Diese Interaktionsform stellt ein erhebliches Barrierefreiheitsproblem dar. Grundsätzlich ist Drag and Drop meist nicht für die Tastaturnutzung ausgelegt, sondern auf die Bedienung per Maus oder Touch optimiert. Beides funktioniert in der Regel problemlos: Ein Element wird mit dem Mauszeiger „angehoben“, an die gewünschte Position bewegt und dort wieder losgelassen; per Touch verläuft dies ähnlich.
Für Tastaturnutzerinnen und ist Drag and Drop jedoch häufig nicht zugänglich, was zu einer Reihe von Barrierefreiheitsproblemen für verschiedene Nutzergruppen führt:
Blinde Menschen:
Sie können aufgrund ihrer Seheinschränkung keine Maus nutzen oder, selbst wenn, weder erkennen, welches Element sie aufnehmen, noch an welche Stelle sie es verschieben. Die dafür nötigen Informationen werden oft gar nicht oder nicht ausreichend ausgegeben.
Auch sie können in der Regel eine Maus bedienen, jedoch nur einen sehr kleinen Ausschnitt des Bildschirms überblicken. Dadurch können sie ein Element zwar eventuell aufnehmen, haben aber große Schwierigkeiten, es an der gewünschten Stelle abzulegen. Häufig wird der vorgesehene Drop-Bereich verfehlt – insbesondere wenn dieser klein oder schlecht sichtbar ist. Die Aktion bricht dann ab, das Element bleibt an seiner ursprünglichen Position, und der Vorgang muss wiederholt werden. Nach mehreren erfolglosen Versuchen geben viele schließlich frustriert auf. Hinzu kommt, dass das präzise Positionieren des Mauszeigers erschwert wird, wenn das zu verschiebende Element selbst unter dem Cursor eingeblendet ist.
Bei motorischen Behinderungen ergeben sich ähnliche Probleme, wobei hier vor allem die Feinmotorik im Vordergrund steht. Die Maustaste kann möglicherweise nicht lange genug gedrückt gehalten werden, oder sie wird versehentlich losgelassen. Zudem kann der Cursor leicht außerhalb des Drop-Bereichs geraten, sodass der Vorgang erneut gestartet werden muss.
Für Menschen mit kognitiven Behinderungen stellt Drag and Drop eine anspruchsvolle kognitive Aufgabe dar – insbesondere, wenn viele Elemente auf dem Bildschirm angezeigt werden. Oft ist nicht klar erkennbar, dass ein Element überhaupt verschoben werden kann, da solche Hinweise meist nur subtil dargestellt werden. Auch die Drop-Zonen sind häufig nicht oder nur schwer verständlich markiert. Dadurch wird die Durchführung einer Drag-and-Drop-Aktion erheblich erschwert.
Technische Probleme
Sehen wir uns nun die technischen Probleme genauer an. Zunächst treten zahlreiche semantische Schwierigkeiten auf. Nutzerinnen und Nutzer müssen zunächst überhaupt erfahren, dass ein Element verschoben werden kann. Ich bin mir nicht sicher, ob es hierfür eigene ARIA-Attribute oder semantische HTML-Elemente gibt, die explizit auf die Verschiebbarkeit hinweisen. In jedem Fall muss sowohl blinden als auch sehbehinderten Personen mitgeteilt werden, dass ein Element verschoben werden kann, wohin es verschoben werden kann und – bei komplexeren Drag-and-Drop-Interaktionen – wo es sich aktuell befindet und ob es an dieser Stelle abgelegt werden kann. Dies ist anspruchsvoll umzusetzen, weil die entsprechende Semantik häufig nicht hinterlegt ist.
Ein weiteres zentrales Problem betrifft den Tastaturfokus. Falls ein Element überhaupt per Tastatur bewegt werden kann – was eher selten ist –, kann es während des Verschiebevorgangs passieren, dass der Fokus verloren geht, etwa weil andere Elemente dazwischen geraten oder eine unpassende Taste gedrückt wurde. In solchen Fällen muss die gesamte Aktion wiederholt werden.
Für sehbehinderte Menschen ist zudem problematisch, dass die Verschiebbarkeit eines Elements visuell oft nicht klar erkennbar ist. Häufig wird dies nur durch subtile Linien oder bestimmte Gestaltungsmuster angedeutet. Ein Beispiel ist das WordPress-Dashboard: Auf der Startseite können verschiedene Widgets – etwa Statistiken oder Listen mit fehlerhaften Links – frei verschoben werden. Soweit ich sehe, gibt es dafür jedoch keinen eindeutigen visuellen Indikator. Teilweise existieren kleine Pfeile, mit denen Elemente nach oben oder unten bewegt werden können, doch viele Nutzerinnen und Nutzer erkennen deren Bedeutung nicht. Sehbehinderte Personen haben häufig Schwierigkeiten mit visuellen Mustern: Auch wenn solche Patterns für sehende Menschen eindeutig wirken, können sie für Sehbehinderte unauffällig oder missverständlich sein. Sie könnten als rein dekorative Elemente wahrgenommen werden oder schlicht nicht als Interaktionshinweise identifizierbar sein. Hinzu kommt, dass ständig neue visuelle Patterns entstehen, deren Bedeutungen wiederum erlernt werden müssten.
Auch für farbenblinde Menschen oder Personen mit geringer Kontrastwahrnehmung ergeben sich besondere Herausforderungen. Ein typisches Beispiel ist die Hervorhebung von Drop-Zonen. Oft wird beim Verschieben eines Elements ein farbiger Rahmen oder eine farbig hinterlegte Fläche angezeigt. Wenn diese Markierungen jedoch nicht ausreichend kontrastreich sind oder ausschließlich über Farbe kommuniziert werden, sind sie für betroffene Personen schwer oder gar nicht wahrnehmbar. Dadurch wird das gezielte Ablegen eines Elements deutlich erschwert.
In den WCAG gibt es mehrere Kriterien, die für Drag-and-Drop-Interaktionen relevant sind. Dazu zählen insbesondere die Anforderungen zur Tastaturbedienung sowie Regeln, die pfad-abhängige Informationen und Interaktionen betreffen. Darüber hinaus existiert ein spezielles Erfolgskriterium, 2.5.7 Dragging Movements, das genau dieses Thema adressiert.
Mögliche Lösungen
Der zentrale Ansatz besteht darin, dass für eine Drag-and-Drop-Funktion, die per Maus oder Touch bedient werden kann, immer eine alternative Bedienmöglichkeit zur Verfügung stehen muss. Diese Alternative soll ohne Maus und ohne pfadbasierte Touch-Gesten nutzbar sein. Pfadbasierte Gesten – also etwa das Ausführen bestimmter Wischbewegungen – sind für motorisch eingeschränkte Menschen oft schwierig, weshalb dafür zwingend eine Alternative anzubieten ist.
Es gibt verschiedene Strategien, um eine solche Alternative bereitzustellen:
1. Einfache Alternativen für Uploads
Bei sehr einfachen Drag-and-Drop-Szenarien, wie dem Hochladen von Dateien durch Ziehen in den Browser, besteht die sinnvollste Alternative meist in einem zusätzlichen Upload-Button. Nutzerinnen und Nutzer können eine Datei dann nicht nur hineinziehen, sondern sie auch ganz klassisch über eine Schaltfläche auswählen. Gerade bei einfachen Anwendungsfällen ist dies die praktikabelste Lösung.
2. Tastaturbasierte Alternativen für komplexere Strukturen
Bei komplexeren Szenarien – etwa dem Verschieben von Elementen innerhalb einer Ordnerstruktur oder dem Neuordnen von Listen – hat sich eine andere Methode bewährt:
Ein Element wird zunächst per Leertaste ausgewählt. Anschließend kann es mittels Pfeiltasten (oben/unten oder links/rechts) an eine andere Position verschoben werden. Ein Screenreader kündigt dabei idealerweise immer die aktuelle Position sowie die benachbarten Elemente an, zum Beispiel:
• „Position 2 von 10“
• „Vorheriges Element: …“
• „Nächstes Element: …“
Diese detaillierten Rückmeldungen wirken zwar umfangreich, sind aber notwendig, damit Nutzerinnen und Nutzer die genaue Positionierung nachvollziehen können.
Dieses Bedienmuster – Auswahl per Leertaste, Verschieben per Pfeiltasten – ist grundsätzlich etabliert, jedoch längst nicht allen Personen bekannt. Deshalb ist es wichtig, die Funktionsweise klar zu kommunizieren, beispielsweise über ARIA-Hinweise oder ergänzende, nur für Screenreader sichtbare Texte. Auch Tastaturnutzerinnen und -nutzer ohne Screenreader benötigen einen Hinweis, damit sie wissen, welche Tastenkombinationen zur Verfügung stehen. Wenn zwar eine tastaturbasierte Steuerung existiert, die Nutzerinnen aber nicht wissen, wie sie funktioniert, ist ihnen damit nicht geholfen.
Eine weitere Möglichkeit – und aus meiner Sicht derzeit die einfachste – besteht darin, zwei Schaltflächen bereitzustellen: eine zum Verschieben nach oben und eine zum Verschieben nach unten. Diese Buttons sind problemlos mit der Tastatur erreichbar, eindeutig beschriftet und lösen dieselben Rückmeldungen aus wie zuvor beschrieben. Das heißt, nach einer Aktion wird beispielsweise angesagt, dass das Element um eine Position nach unten verschoben wurde und welche Elemente nun davor bzw. dahinter stehen.
Der große Vorteil dieser Lösung liegt darin, dass sie keine komplexen Tastatureingaben erfordert und auch auf Smartphones funktioniert. Denn wenn ein mobiles Gerät keine Tastatur besitzt, hilft es Nutzerinnen wenig, wenn ein Element eigentlich per Leertaste ausgewählt werden könnte. Mobile Geräte benötigen daher zwingend eine gut nutzbare Alternative.
Eine weitere Möglichkeit – allerdings deutlich aufwändiger – besteht darin, die Position eines Elements über eigene Steuerelemente festzulegen. Dies könnte beispielsweise über eine Select-Box erfolgen, in der die gewünschte Position ausgewählt werden kann („auf Position 3 verschieben“). Nach Bestätigung würde das Element an die entsprechende Stelle verschoben. Diese Lösung hat jedoch mehrere Nachteile: Sie ist vergleichsweise komplex umzusetzen, benötigt viel Platz auf der Benutzeroberfläche und ist insbesondere auf Smartphones wenig praktikabel. Daher ist sie zwar möglich, aber in vielen Fällen nicht optimal.
Abschließende Hinweise
Grundsätzlich sollte immer die einfachste funktionale Lösung gewählt werden. Bereits im Designprozess eines Drag-and-Drop-Elements sollte überlegt werden, wie die Interaktion möglichst barrierefrei gestaltet werden kann. Die typischen Probleme – das unbeabsichtigte Verlassen der Dropzone, das versehentliche Loslassen der Maustaste oder das Ablegen an einer unerwünschten Stelle – betreffen behinderte Menschen besonders häufig.
Daher gilt:
• Die Interaktion sollte so klar und einfach wie möglich sein.
• Die Dropzone muss eindeutig erkennbar sein, idealerweise durch eine gut sichtbare Fläche, nicht nur durch leichte Einrückungen oder subtile farbliche Hervorhebungen.
• Es sollte klar erkennbar sein, an welcher Stelle ein Element landen wird, wenn man es loslässt.
• Und schließlich sollten immer mehrere Möglichkeiten angeboten werden, um die Drag-and-Drop-Funktion zu bedienen.