WCAG 2.1 - 2.5.2
Pointer Cancellation
Für Funktionen, die mit einem einzelnen Zeiger bedient werden können, trifft mindestens eines der folgenden zu:
Inhalt
Was steht in den Guidelines zum Success Criterium 2.5.2 - Pointer Cancellation?Was Bedeutet das Success Criterium 2.5.2 - Pointer Cancellation?Warum ist es so wichtig, das Success Criterium 2.5.2 - Pointer Cancellation zu beachten?Was hat das Success Criterium 2.5.2 - Pointer Cancellation mit dem BFSG zu tun?Lösungen für 2.5.2 - Pointer Cancellation anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.5.2 - Pointer Cancellation?Was steht in den Guidelines zum Success Criterium 2.5.2 - Pointer Cancellation?
Implementationshinweise
- No Down-Event: Das Down-Event des Zeigers wird nicht verwendet, um einen Teil der Funktion auszuführen;
- Abort or Undo: Die Ausführung der Funktion erfolgt beim Aufereignis, und es steht ein Mechanismus zur Verfügung, um die Funktion vor der Ausführung abzubrechen oder die Funktion nach der Ausführung rückgängig zu machen;
- Up Reversal: Das Up-Event kehrt jedes Ergebnis des vorhergehenden Down-Events um;
- Essential: Das Ausführen der Funktion beim Down-Event ist entscheidend.
Was Bedeutet das Success Criterium 2.5.2 - Pointer Cancellation?
Das WCAG Success Criterion 2.5.2 – Pointer Cancellation verlangt, dass Nutzer:innen jederzeit die Möglichkeit haben, eine Aktion, die durch Pointer-Eingaben (z.B. Maus, Touch, Stylus) ausgelöst wird, noch aufzuheben oder rückgängig zu machen, bevor sie tatsächlich ausgeführt wird. Das bedeutet im Alltag: Aktionen auf Buttons oder Links dürfen nicht schon beim Drücken ("down"-Event), sondern erst durch das Loslassen ("up"-Event) des Pointers ausgelöst werden.
Fachlich bedeutet das:
- Eine Aktion darf nicht sofort ausgeführt werden, wenn jemand z.B. mit dem Finger auf ein Element tippt, sondern erst, wenn der Finger wieder gehoben wird und der Pointer sich noch auf dem Element befindet.
- Nutzer:innen müssen die Gelegenheit haben, die Bewegung abzubrechen, indem sie den Finger oder Mauszeiger außerhalb des Elements bewegen, bevor sie loslassen ("cancelling the action").
- Das ist besonders relevant für Menschen mit motorischen Einschränkungen, die leichter versehentlich Dinge auslösen können.
Warum ist es so wichtig, das Success Criterium 2.5.2 - Pointer Cancellation zu beachten?
Dieses Kriterium ist entscheidend für die Bedienbarkeit, weil es versehentliche Aktionen verhindert. Viele Menschen – insbesondere Menschen mit motorischen Einschränkungen, zittrigen Händen oder kognitiven Beeinträchtigungen – könnten sonst leicht unbeabsichtigt Bestellungen absenden, Daten löschen oder andere irreversible Aktionen durchführen. Es erlaubt ihnen, ihre Auswahl zu überdenken und zu korrigieren, bevor etwas passiert.
Was hat das Success Criterium 2.5.2 - Pointer Cancellation mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verlangt, dass Websites vollständig konform mit den W3C-WCAG-Richtlinien (mindestens Stufe AA) sind. Da 2.5.2 Teil dieser Richtlinien ist, MÜSSEN Webangebote diese Anforderung erfüllen. Wird sie nicht umgesetzt, können insbesondere Menschen mit Behinderung die Website nicht sicher bedienen, was laut BFSG eine deutliche Diskriminierung darstellt und zu rechtlichen Konsequenzen führen kann.
Lösungen für 2.5.2 - Pointer Cancellation anhand von Codebeispielen
Falscher Code
<button onclick="doSomething()">
Jetzt ausführen
</button>
<script>
document.querySelector('button').addEventListener('mousedown', function() {
doSomething(); // Aktion wird schon beim Drücken ausgeführt
});
</script>Korrekter Code
<button onclick="doSomething()">
Jetzt ausführen
</button>
<script>
document.querySelector('button').addEventListener('mouseup', function(event) {
// Prüfen, ob der Mauszeiger während des Loslassens noch auf dem Button ist
if (event.target === document.activeElement) {
doSomething(); // Aktion erst beim Loslassen und nur, wenn der Cursor noch auf dem Button ist
}
});
</script>Im schlechten Beispiel wird die Aktion bereits beim Herunterdrücken der Maustaste ausgelöst – Nutzer:innen können sie nicht mehr abbrechen. Im guten Beispiel wird die Funktion erst beim Loslassen der Taste ausgelöst und nur dann, wenn sich der Pointer noch auf dem Button befindet. Damit bleibt Zeit, Aktionen zu überdenken oder abzubrechen, indem man z.B. die Maus vor dem Loslassen wegzieht.
Falscher Code
<div onclick="deleteItem()">Löschen</div>Korrekter Code
<div tabindex="0" role="button" aria-label="Löschen"
onmousedown="event.preventDefault();"
onmouseup="if (event.target === document.activeElement) deleteItem();">
Löschen
</div>Im schlechten Beispiel wird die Lösch-Aktion direkt ausgelöst, wenn jemand irgendwo auf das Element klickt. Im guten Beispiel sorgt die Trennung von mousedown und mouseup dafür, dass keine versehentlichen Löschungen passieren und man die Aktion abbrechen kann, indem man den Pointer wegbewegt, bevor man loslässt.
Wie löse ich Verstöße gegen das Success Criterium 2.5.2 - Pointer Cancellation?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.