{"id":10412,"date":"2025-11-15T17:34:05","date_gmt":"2025-11-15T15:34:05","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10412"},"modified":"2025-11-16T17:44:33","modified_gmt":"2025-11-16T15:44:33","slug":"drag-drop-barrierefrei-gestalten","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/drag-drop-barrierefrei-gestalten\/","title":{"rendered":"Drag &#038; Drop barrierefrei gestalten"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/333-drag-drop-barrierefrei-gestalten\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nHeute geht es um Drag-and-Drop-Funktionen, also das Verschieben von Elementen. Diese Interaktionsform stellt ein erhebliches Barrierefreiheitsproblem dar. Grunds\u00e4tzlich ist Drag and Drop meist nicht f\u00fcr die Tastaturnutzung ausgelegt, sondern auf die Bedienung per Maus oder Touch optimiert. Beides funktioniert in der Regel problemlos: Ein Element wird mit dem Mauszeiger \u201eangehoben\u201c, an die gew\u00fcnschte Position bewegt und dort wieder losgelassen; per Touch verl\u00e4uft dies \u00e4hnlich.<br \/>\nF\u00fcr Tastaturnutzerinnen und ist Drag and Drop jedoch h\u00e4ufig nicht zug\u00e4nglich, was zu einer Reihe von Barrierefreiheitsproblemen f\u00fcr verschiedene Nutzergruppen f\u00fchrt:<br \/>\nBlinde Menschen:<br \/>\nSie k\u00f6nnen aufgrund ihrer Seheinschr\u00e4nkung keine Maus nutzen oder, selbst wenn, weder erkennen, welches Element sie aufnehmen, noch an welche Stelle sie es verschieben. Die daf\u00fcr n\u00f6tigen Informationen werden oft gar nicht oder nicht ausreichend ausgegeben.<br \/>\nAuch sie k\u00f6nnen in der Regel eine Maus bedienen, jedoch nur einen sehr kleinen Ausschnitt des Bildschirms \u00fcberblicken. Dadurch k\u00f6nnen sie ein Element zwar eventuell aufnehmen, haben aber gro\u00dfe Schwierigkeiten, es an der gew\u00fcnschten Stelle abzulegen. H\u00e4ufig wird der vorgesehene Drop-Bereich verfehlt \u2013 insbesondere wenn dieser klein oder schlecht sichtbar ist. Die Aktion bricht dann ab, das Element bleibt an seiner urspr\u00fcnglichen Position, und der Vorgang muss wiederholt werden. Nach mehreren erfolglosen Versuchen geben viele schlie\u00dflich frustriert auf. Hinzu kommt, dass das pr\u00e4zise Positionieren des Mauszeigers erschwert wird, wenn das zu verschiebende Element selbst unter dem Cursor eingeblendet ist.<br \/>\nBei motorischen Behinderungen ergeben sich \u00e4hnliche Probleme, wobei hier vor allem die Feinmotorik im Vordergrund steht. Die Maustaste kann m\u00f6glicherweise nicht lange genug gedr\u00fcckt gehalten werden, oder sie wird versehentlich losgelassen. Zudem kann der Cursor leicht au\u00dferhalb des Drop-Bereichs geraten, sodass der Vorgang erneut gestartet werden muss.<br \/>\nF\u00fcr Menschen mit kognitiven Behinderungen stellt Drag and Drop eine anspruchsvolle kognitive Aufgabe dar \u2013 insbesondere, wenn viele Elemente auf dem Bildschirm angezeigt werden. Oft ist nicht klar erkennbar, dass ein Element \u00fcberhaupt verschoben werden kann, da solche Hinweise meist nur subtil dargestellt werden. Auch die Drop-Zonen sind h\u00e4ufig nicht oder nur schwer verst\u00e4ndlich markiert. Dadurch wird die Durchf\u00fchrung einer Drag-and-Drop-Aktion erheblich erschwert.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_87 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/drag-drop-barrierefrei-gestalten\/#Technische_Probleme\" >Technische Probleme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/drag-drop-barrierefrei-gestalten\/#Moegliche_Loesungen\" >M\u00f6gliche L\u00f6sungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/drag-drop-barrierefrei-gestalten\/#Abschliessende_Hinweise\" >Abschlie\u00dfende Hinweise<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Technische_Probleme\"><\/span>Technische Probleme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sehen wir uns nun die technischen Probleme genauer an. Zun\u00e4chst treten zahlreiche semantische Schwierigkeiten auf. Nutzerinnen und Nutzer m\u00fcssen zun\u00e4chst \u00fcberhaupt erfahren, dass ein Element verschoben werden kann. Ich bin mir nicht sicher, ob es hierf\u00fcr 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 \u2013 bei komplexeren Drag-and-Drop-Interaktionen \u2013 wo es sich aktuell befindet und ob es an dieser Stelle abgelegt werden kann. Dies ist anspruchsvoll umzusetzen, weil die entsprechende Semantik h\u00e4ufig nicht hinterlegt ist.<br \/>\nEin weiteres zentrales Problem betrifft den Tastaturfokus. Falls ein Element \u00fcberhaupt per Tastatur bewegt werden kann \u2013 was eher selten ist \u2013, kann es w\u00e4hrend des Verschiebevorgangs passieren, dass der Fokus verloren geht, etwa weil andere Elemente dazwischen geraten oder eine unpassende Taste gedr\u00fcckt wurde. In solchen F\u00e4llen muss die gesamte Aktion wiederholt werden.<br \/>\nF\u00fcr sehbehinderte Menschen ist zudem problematisch, dass die Verschiebbarkeit eines Elements visuell oft nicht klar erkennbar ist. H\u00e4ufig wird dies nur durch subtile Linien oder bestimmte Gestaltungsmuster angedeutet. Ein Beispiel ist das WordPress-Dashboard: Auf der Startseite k\u00f6nnen verschiedene Widgets \u2013 etwa Statistiken oder Listen mit fehlerhaften Links \u2013 frei verschoben werden. Soweit ich sehe, gibt es daf\u00fcr jedoch keinen eindeutigen visuellen Indikator. Teilweise existieren kleine Pfeile, mit denen Elemente nach oben oder unten bewegt werden k\u00f6nnen, doch viele Nutzerinnen und Nutzer erkennen deren Bedeutung nicht. Sehbehinderte Personen haben h\u00e4ufig Schwierigkeiten mit visuellen Mustern: Auch wenn solche Patterns f\u00fcr sehende Menschen eindeutig wirken, k\u00f6nnen sie f\u00fcr Sehbehinderte unauff\u00e4llig oder missverst\u00e4ndlich sein. Sie k\u00f6nnten als rein dekorative Elemente wahrgenommen werden oder schlicht nicht als Interaktionshinweise identifizierbar sein. Hinzu kommt, dass st\u00e4ndig neue visuelle Patterns entstehen, deren Bedeutungen wiederum erlernt werden m\u00fcssten.<br \/>\nAuch f\u00fcr 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\u00e4che angezeigt. Wenn diese Markierungen jedoch nicht ausreichend kontrastreich sind oder ausschlie\u00dflich \u00fcber Farbe kommuniziert werden, sind sie f\u00fcr betroffene Personen schwer oder gar nicht wahrnehmbar. Dadurch wird das gezielte Ablegen eines Elements deutlich erschwert.<br \/>\nIn den WCAG gibt es mehrere Kriterien, die f\u00fcr Drag-and-Drop-Interaktionen relevant sind. Dazu z\u00e4hlen insbesondere die Anforderungen zur Tastaturbedienung sowie Regeln, die pfad-abh\u00e4ngige Informationen und Interaktionen betreffen. Dar\u00fcber hinaus existiert ein spezielles Erfolgskriterium, 2.5.7 Dragging Movements, das genau dieses Thema adressiert.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Moegliche_Loesungen\"><\/span>M\u00f6gliche L\u00f6sungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der zentrale Ansatz besteht darin, dass f\u00fcr eine Drag-and-Drop-Funktion, die per Maus oder Touch bedient werden kann, immer eine alternative Bedienm\u00f6glichkeit zur Verf\u00fcgung stehen muss. Diese Alternative soll ohne Maus und ohne pfadbasierte Touch-Gesten nutzbar sein. Pfadbasierte Gesten \u2013 also etwa das Ausf\u00fchren bestimmter Wischbewegungen \u2013 sind f\u00fcr motorisch eingeschr\u00e4nkte Menschen oft schwierig, weshalb daf\u00fcr zwingend eine Alternative anzubieten ist.<br \/>\nEs gibt verschiedene Strategien, um eine solche Alternative bereitzustellen:<br \/>\n1. Einfache Alternativen f\u00fcr Uploads<br \/>\nBei sehr einfachen Drag-and-Drop-Szenarien, wie dem Hochladen von Dateien durch Ziehen in den Browser, besteht die sinnvollste Alternative meist in einem zus\u00e4tzlichen Upload-Button. Nutzerinnen und Nutzer k\u00f6nnen eine Datei dann nicht nur hineinziehen, sondern sie auch ganz klassisch \u00fcber eine Schaltfl\u00e4che ausw\u00e4hlen. Gerade bei einfachen Anwendungsf\u00e4llen ist dies die praktikabelste L\u00f6sung.<br \/>\n2. Tastaturbasierte Alternativen f\u00fcr komplexere Strukturen<br \/>\nBei komplexeren Szenarien \u2013 etwa dem Verschieben von Elementen innerhalb einer Ordnerstruktur oder dem Neuordnen von Listen \u2013 hat sich eine andere Methode bew\u00e4hrt:<br \/>\nEin Element wird zun\u00e4chst per Leertaste ausgew\u00e4hlt. Anschlie\u00dfend kann es mittels Pfeiltasten (oben\/unten oder links\/rechts) an eine andere Position verschoben werden. Ein Screenreader k\u00fcndigt dabei idealerweise immer die aktuelle Position sowie die benachbarten Elemente an, zum Beispiel:<br \/>\n\u2022 \u201ePosition 2 von 10\u201c<br \/>\n\u2022 \u201eVorheriges Element: \u2026\u201c<br \/>\n\u2022 \u201eN\u00e4chstes Element: \u2026\u201c<br \/>\nDiese detaillierten R\u00fcckmeldungen wirken zwar umfangreich, sind aber notwendig, damit Nutzerinnen und Nutzer die genaue Positionierung nachvollziehen k\u00f6nnen.<br \/>\nDieses Bedienmuster \u2013 Auswahl per Leertaste, Verschieben per Pfeiltasten \u2013 ist grunds\u00e4tzlich etabliert, jedoch l\u00e4ngst nicht allen Personen bekannt. Deshalb ist es wichtig, die Funktionsweise klar zu kommunizieren, beispielsweise \u00fcber ARIA-Hinweise oder erg\u00e4nzende, nur f\u00fcr Screenreader sichtbare Texte. Auch Tastaturnutzerinnen und -nutzer ohne Screenreader ben\u00f6tigen einen Hinweis, damit sie wissen, welche Tastenkombinationen zur Verf\u00fcgung stehen. Wenn zwar eine tastaturbasierte Steuerung existiert, die Nutzerinnen aber nicht wissen, wie sie funktioniert, ist ihnen damit nicht geholfen.<br \/>\n Eine weitere M\u00f6glichkeit \u2013 und aus meiner Sicht derzeit die einfachste \u2013 besteht darin, zwei Schaltfl\u00e4chen bereitzustellen: eine zum Verschieben nach oben und eine zum Verschieben nach unten. Diese Buttons sind problemlos mit der Tastatur erreichbar, eindeutig beschriftet und l\u00f6sen dieselben R\u00fcckmeldungen aus wie zuvor beschrieben. Das hei\u00dft, nach einer Aktion wird beispielsweise angesagt, dass das Element um eine Position nach unten verschoben wurde und welche Elemente nun davor bzw. dahinter stehen.<br \/>\nDer gro\u00dfe Vorteil dieser L\u00f6sung liegt darin, dass sie keine komplexen Tastatureingaben erfordert und auch auf Smartphones funktioniert. Denn wenn ein mobiles Ger\u00e4t keine Tastatur besitzt, hilft es Nutzerinnen wenig, wenn ein Element eigentlich per Leertaste ausgew\u00e4hlt werden k\u00f6nnte. Mobile Ger\u00e4te ben\u00f6tigen daher zwingend eine gut nutzbare Alternative.<br \/>\nEine weitere M\u00f6glichkeit \u2013 allerdings deutlich aufw\u00e4ndiger \u2013 besteht darin, die Position eines Elements \u00fcber eigene Steuerelemente festzulegen. Dies k\u00f6nnte beispielsweise \u00fcber eine Select-Box erfolgen, in der die gew\u00fcnschte Position ausgew\u00e4hlt werden kann (\u201eauf Position 3 verschieben\u201c). Nach Best\u00e4tigung w\u00fcrde das Element an die entsprechende Stelle verschoben. Diese L\u00f6sung hat jedoch mehrere Nachteile: Sie ist vergleichsweise komplex umzusetzen, ben\u00f6tigt viel Platz auf der Benutzeroberfl\u00e4che und ist insbesondere auf Smartphones wenig praktikabel. Daher ist sie zwar m\u00f6glich, aber in vielen F\u00e4llen nicht optimal.<br \/>\nMaus-Nutzende k\u00f6nnen unterst\u00fctzt werden, indem das Element nicht bei Loslassen der Maustaste losgelassen wird: Das Element kann mit dem Mauscoursor ausgew\u00e4hlt werden und vebleibt solange, bis es durch einen Doppelklick an der Stelle fallengelassen wird, wo es hin soll. Das w\u00fcrde die Feinmotorik weniger fordern und verringert die Zahl der Fehl-Bedienungen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Abschliessende_Hinweise\"><\/span>Abschlie\u00dfende Hinweise<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grunds\u00e4tzlich sollte immer die einfachste funktionale L\u00f6sung gew\u00e4hlt werden. Bereits im Designprozess eines Drag-and-Drop-Elements sollte \u00fcberlegt werden, wie die Interaktion m\u00f6glichst barrierefrei gestaltet werden kann. Die typischen Probleme \u2013 das unbeabsichtigte Verlassen der Dropzone, das versehentliche Loslassen der Maustaste oder das Ablegen an einer unerw\u00fcnschten Stelle \u2013 betreffen behinderte Menschen besonders h\u00e4ufig.<br \/>\nDaher gilt:<br \/>\n\u2022  Die Interaktion sollte so klar und einfach wie m\u00f6glich sein.<br \/>\n\u2022  Die Dropzone muss eindeutig erkennbar sein, idealerweise durch eine gut sichtbare Fl\u00e4che, nicht nur durch leichte Einr\u00fcckungen oder subtile farbliche Hervorhebungen.<br \/>\n\u2022  Es sollte klar erkennbar sein, an welcher Stelle ein Element landen wird, wenn man es losl\u00e4sst.<br \/>\n\u2022  Und schlie\u00dflich sollten immer mehrere M\u00f6glichkeiten angeboten werden, um die Drag-and-Drop-Funktion zu bedienen.<br \/>\nGenerell sollte immer dar\u00fcber nachgedacht werden, ob Drag &#038; Drop im Kontext ein sinnvolles Interaktionsmuster ist. In vielen F\u00e4llen k\u00f6nnte eine einfachere M\u00f6glichkeit angeboten werden. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Heute geht es um Drag-and-Drop-Funktionen, also das Verschieben von Elementen. Diese Interaktionsform stellt ein erhebliches Barrierefreiheitsproblem dar. Grunds\u00e4tzlich ist Drag and Drop meist nicht f\u00fcr&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/drag-drop-barrierefrei-gestalten\/\">Weiterlesen<span class=\"screen-reader-text\">Drag &#038; Drop barrierefrei gestalten<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10412","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=10412"}],"version-history":[{"count":3,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10412\/revisions"}],"predecessor-version":[{"id":10423,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10412\/revisions\/10423"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}