Barrierefreiheitszertifikat – Startseite

2.5.2 Zeigeraktion abbrechen

Aktionen per Maus oder Finger sollen erst beim Loslassen auslösen oder sich abbrechen bzw. rückgängig machen lassen.

Stufe APrinzip 2: Bedienbar

Was bedeutet das?

Wer versehentlich auf den falschen Knopf tippt, sollte das korrigieren können. Löst eine Aktion erst beim Loslassen aus, kann man den Finger oder die Maus vorher noch wegziehen. Das ist das normale Verhalten von Links und Knöpfen im Browser.

Löst etwas schon beim Herunterdrücken aus, muss es sich rückgängig machen lassen oder beim Loslassen zurücknehmen, etwa bei einer Vorschau, die nur solange erscheint, wie man gedrückt hält. Erlaubt ist das Auslösen beim Drücken nur, wenn es wesentlich ist, etwa bei einer Bildschirm-Klaviertastatur.

Wem hilft das?

  • Menschen mit motorischen Einschränkungen, die öfter danebentippen
  • Menschen mit Sehschwäche, die Ziele schlecht treffen
  • Menschen mit kognitiven Einschränkungen, die eine Aktion noch abbrechen möchten

Typische Fehler

  • Ein Kaufen- oder Löschen-Knopf reagiert bereits auf mousedown oder touchstart
  • Ein Menüpunkt navigiert schon beim Drücken weg, ohne dass man abbrechen kann
  • Ein Dialog schließt sich bei pointerdown außerhalb, obwohl man nur etwas markieren wollte

So prüfen wir das

  • nur Mensch Nur von Hand: Hier lässt sich nichts Sinnvolles messen. Die Prüferin oder der Prüfer testet es direkt.

Prüffrage: Aktionen lösen beim Loslassen aus, nicht beim Drücken, oder lassen sich abbrechen.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

Problem
loeschen.addEventListener("mousedown", () => {
  eintragLoeschen(id);
});
Besser
loeschen.addEventListener("click", () => {
  eintragLoeschen(id);
  zeigeHinweis("Eintrag gelöscht.", {
    rueckgaengig: () => eintragWiederherstellen(id),
  });
});

Das click-Ereignis löst erst beim Loslassen aus, und ein Rückgängig-Knopf fängt Fehler zusätzlich ab.

Praxistipps

  • Bleiben Sie bei click statt mousedown, pointerdown oder touchstart, wenn es keinen zwingenden Grund gibt.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.5.2 Pointer Cancellation

Wie steht Ihre Website bei diesem Kriterium?

Der kostenlose Check prüft Ihre Startseite automatisch, das Audit entscheidet alle 55 Kriterien.

Kostenlos prüfenAlle Kriterien