Ein Element greifen, mit gedrücktem Finger über den Bildschirm ziehen und an genau der richtigen Stelle wieder loslassen. Diese eine Geste steckt heute in vielen Funktionen, vom Sortieren einer Liste bis zum Hochladen einer Datei.
Für eine ruhige Maushand ist das eine Kleinigkeit. Eine zittrige Hand, eine Tastatur oder ein einzelner Schalter scheitern daran sofort. Wer jede solche Funktion auch ohne Ziehen bedienbar macht, holt diese Besucher zurück an Bord, und das verlangt heute auch die Regel WCAG 2.2.
Wo das Ziehen im Web überall steckt
Drag-and-Drop wirkt oft modern und elegant, deshalb taucht es an immer mehr Stellen auf. Sobald sich etwas verschieben, neu anordnen oder ablegen lässt, steckt meist diese Geste dahinter.
- Sortierbare Listen: Favoriten, Aufgaben oder Bilder werden per Ziehen in die gewünschte Reihenfolge gebracht.
- Kanban-Boards: Eine Karte wandert von „offen" nach „erledigt", indem man sie in die nächste Spalte zieht.
- Datei-Upload: Ein Foto wird aus dem Ordner in ein markiertes Feld auf der Seite gezogen.
- Galerien und Slider: Bilder werden mit dem Finger zur Seite gewischt.
Jede dieser Funktionen ist praktisch, solange eine zweite Bedienart daneben steht. Fehlt die, bleibt ein Teil Deiner Besucher außen vor.
Warum die Ziehgeste so viele aussperrt
Ziehen und Halten verlangt drei Dinge gleichzeitig. Du musst zielgenau greifen, die Bewegung ruhig führen und am exakt richtigen Punkt loslassen. Schon eine dieser Anforderungen wird für viele Hände zur Hürde.
Wer einen Tremor hat, verliert das Element auf halbem Weg. Wer nur die Tastatur nutzt, hat gar keinen Zeiger zum Ziehen. Ein Schalter oder die Augensteuerung kennen das gedrückt-halten-und-bewegen schlicht nicht. Und am Handy rutscht der Daumen beim langen Ziehen leicht ab.
Diese Gruppen überschneiden sich mit den Menschen, die ihre Seite ohnehin über andere Wege steuern. Wie breit dieser Kreis ist, zeigt der Beitrag über Menschen mit motorischen Einschränkungen.
Was WCAG 2.2 dazu sagt
Mit der Fassung 2.2 hat das Regelwerk für Barrierefreiheit einen eigenen Punkt für genau diese Geste bekommen. Er heißt „Dragging Movements" und gilt für jede Funktion, die sich durch Ziehen bedienen lässt.
Die Forderung ist erfreulich klar. Für jede Ziehgeste muss es einen einfachen Weg über einen einzelnen Zeiger geben, also über das, was auch ein Tastendruck oder ein Klick auslösen kann. Ein Knopf, ein Menü oder eine Pfeiltaste reicht völlig. Wichtig ist, dass niemand zum Ziehen gezwungen wird, um ans Ziel zu kommen.
Wie dieser Punkt in das größere Bild der Standards passt, ordnen die Grundlagen der Barrierefreiheit ein.
Die Tastatur-Alternative zum Ziehen
Eine sortierbare Liste lässt sich auch ganz ohne Maus bedienen, wenn sie drei einfache Schritte anbietet. Das Muster ist immer gleich und für jeden Besucher schnell verstanden.
- Greifen: Das Element wird mit der Tab-Taste angesteuert und mit der Leertaste oder Eingabetaste angehoben.
- Bewegen: Mit den Pfeiltasten wandert es eine Position nach oben oder unten, nach links oder rechts.
- Ablegen: Ein zweiter Druck auf die Leertaste setzt es an der neuen Stelle ab, Escape bricht ohne Änderung ab.
Dasselbe Prinzip trägt auch ein Kanban-Board. Statt eine Karte in die Nachbarspalte zu ziehen, hebt der Besucher sie an und schiebt sie mit den Pfeiltasten weiter. Niemand bleibt hängen, weil die Hand eine lange Ziehbewegung nicht schafft.
Die neue Position muss angesagt werden
Wer nicht sehen kann, wohin ein Element gewandert ist, braucht eine Ansage. Ein Screenreader liest vor, was auf dem Bildschirm passiert, doch eine still verschobene Karte bleibt für ihn unsichtbar.
Eine gut gebaute Funktion sagt deshalb jeden Schritt an. Beim Anheben hört der Besucher, dass das Element jetzt greifbar ist. Bei jeder Bewegung folgt die neue Position als Satz, etwa „Aufgabe drei, Position zwei von fünf". So weiß er jederzeit, wo er steht, auch ohne einen Blick auf den Schirm.
Diese Ansagen baut Deine Agentur ein, Du gibst sie als Anforderung mit. Achte darauf, dass Sortieren und Verschieben für blinde Besucher nicht stumm bleiben.
Sichtbarer Zustand beim Verschieben
Auch wer sieht, braucht ständig Rückmeldung. Beim Ziehen mit der Maus zeigt das schwebende Element von selbst, dass gerade etwas passiert. Bei der Tastatur fehlt dieses Bild, also muss die Seite es ersetzen.
Ein angehobenes Element bekommt deshalb eine deutliche Markierung, einen Rahmen oder einen leichten Schatten. Während Du es mit den Pfeiltasten bewegst, wandert diese Markierung sichtbar mit. Die Stelle, an der es landen würde, hebt sich ebenfalls ab.
So sieht jeder Besucher in jedem Moment, was er greift und wohin es geht. Eine klare, gut sichtbare Markierung ist dabei die halbe Miete, wie der Beitrag zum sichtbaren Fokus zeigt.
Datei-Upload ohne Ziehen
Der Upload per Ziehen ist bequem, aber er darf nie der einzige Weg sein. Wer eine Datei nicht aus dem Ordner in ein Feld ziehen kann, braucht einen ganz normalen Auswahl-Knopf direkt daneben.
Dieser Knopf öffnet den vertrauten Datei-Dialog des Geräts, den jeder Besucher schon kennt und über die Tastatur bedienen kann. Das Ziehfeld bleibt als Komfort für die Maus erhalten, der Knopf trägt alle anderen mit.
Die gute Nachricht für Dich ist, dass dieser Knopf fast immer ohnehin vorgesehen ist. Du musst nur prüfen, ob er auch wirklich da und bedienbar ist, statt hinter dem schicken Ziehfeld zu verschwinden.
Der Selbsttest in zwei Minuten
Ob eine Drag-Funktion auch ohne Maus trägt, findest Du selbst heraus. Leg die Maus beiseite und versuch, eine Liste oder ein Board allein mit der Tastatur neu zu ordnen.
- Greifen: Komm mit der Tab-Taste auf ein Element und heb es per Leertaste an. Passiert nichts, fehlt die Tastatur-Alternative schon hier.
- Bewegen: Schieb das Element mit den Pfeiltasten an eine andere Stelle. Reagiert es nicht, kommst Du ohne Ziehen nicht ans Ziel.
- Sehen und hören: Achte darauf, ob Du jederzeit siehst, was Du greifst, und ob die neue Position angesagt wird.
Was Dir dabei auffällt, schreibst Du auf und gibst es Deiner Agentur als klaren Auftrag mit. Zwei Minuten genügen, um die größte Lücke zu finden.
Fazit
Drag-and-Drop ist ein schöner Komfort, solange daneben immer ein zweiter Weg ohne Ziehen steht. Greifen, Bewegen und Ablegen per Tastatur, eine Ansage der neuen Position und eine sichtbare Markierung nehmen alle mit, die nicht ziehen können.
Am schnellsten kommst Du voran, wenn Du Deine eigene Seite zwei Minuten lang ohne Maus sortierst. Was dabei hakt, ist Deine Liste für das nächste Gespräch mit der Agentur, und WCAG 2.2 hast Du damit gleich mit erfüllt.