2.5.2 Pointer Cancellation

WCAG – Definition

Funktionen, die durch eine Zeigereingabe (Touch, Maus, Stift) ausgelöst werden, dürfen nicht sofort beim „Touch-Down“ (erstes Berühren oder Klicken) aktiviert werden.

Nutzer müssen die Möglichkeit haben, ihre Eingabe zu abbrechen oder zu korrigieren.

Bedeutung

  • Verhindert Fehleingaben bei ungenauem Tippen oder unruhigen Händen.

  • Besonders wichtig für Menschen mit motorischen Einschränkungen, Tremor oder bei der Nutzung von Touchscreens auf mobilen Geräten.

  • Macht die Bedienung sicherer für alle (wer kennt es nicht: „falsch geklickt“?).

Was bedeutet „nicht sofort bei Touch-Down“?

  • Touch-Down / Mouse-Down = der Moment, in dem der Finger den Bildschirm berührt oder die Maustaste gedrückt wird.

  • Touch-Up / Mouse-Up = der Moment, in dem der Finger wieder loslässt oder die Maustaste losgelassen wird.

WCAG 2.5.2 verlangt: Die eigentliche Aktion darf erst beim Loslassen (Touch-Up) ausgeführt werden – nicht schon beim ersten Berühren.

Warum?

Stell dir vor:

  • Du willst scrollen und streifst aus Versehen einen Button → schon passiert etwas Ungewolltes.

  • Menschen mit Tremor oder eingeschränkter Motorik tippen nicht exakt → ohne Korrekturmöglichkeit machen sie ständig Fehler.

Mit „Aktion erst beim Loslassen“ hat man Zeit, den Finger wieder wegzuziehen → die Aktion wird abgebrochen.

Beispiel im Alltag

Smartphone-Apps:

  • Beim Scrollen berührt man kurz einen Button → mit „Touch-Down“ wäre sofort was passiert.

  • Mit „Touch-Up“ kann man den Finger schnell wieder wegziehen → nichts wird ausgelöst.

Drag-and-Drop:

  • Wenn man ein Element zieht und außerhalb loslässt, soll nichts passieren.

  • Aktion nur gültig, wenn man korrekt über dem Ziel loslässt.

Ausreichende Techniken

Aktion erst bei „Touch-Up“ / „MouseUp“ auslösen

button.addEventListener('mouseup', doAction);
button.addEventListener('touchend', doAction);

Möglichkeit zum Abbrechen

Ein Klick wird nur ausgeführt, wenn der Finger auf dem Button losgelassen wird. Typisches Browser-Verhalten bei Buttons – darf nicht durch eigenes JS kaputt gemacht werden.

Drag-and-Drop mit Abbruchoption

Bei „Drag“ soll das Loslassen an einem ungültigen Ziel keine Aktion auslösen.

dropZone.addEventListener('drop', handleDrop);
dropZone.addEventListener('dragleave', cancelDrop);

Bestätigung bei kritischen Aktionen

Vor dem Löschen oder Kauf → zusätzliche Bestätigung (Dialog).

button.addEventListener('click', () => {
  if (confirm("Wirklich löschen?")) deleteItem();
});

Beratungstechniken

  • Browser-Standards respektieren: keine Events so umschreiben, dass Aktionen schon bei mousedown passieren.

  • Touch-Fehler vermeiden: große Klickflächen (siehe SC 2.5.8 Target Size).

  • Feedback geben: Button zeigt beim mousedown optisch, dass er gedrückt ist, löst Aktion aber erst beim Loslassen aus.

  • Undo-Option anbieten: bei kritischen Aktionen lieber Rückgängig-Möglichkeit als sofortige Ausführung.

Fehler

  • Aktion wird sofort beim Antippen ausgelöst (z. B. Link öffnet bei mousedown).
  • Drag-and-Drop ohne Abbruch → Element „verschwindet“, auch wenn falsch losgelassen.
  • Button aktiviert sich bei touchstart, bevor Nutzer reagieren kann.
  • Keine Möglichkeit, unbeabsichtigte Eingabe rückgängig zu machen.