Campus Design System

Appearance

2.5.2 Pointer Annulering niveau A ​

Uitleg ​

Het WCAG-criterium 2.5.2 Pointer Annulering vereist dat er een manier is om acties die via pointerinteracties (zoals muisklikken of touch-bewegingen) worden gestart, te annuleren of ongedaan te maken. Dit is van essentieel belang voor mensen die moeite hebben met het uitvoeren van nauwkeurige of gecontroleerde bewegingen. Dit criterium richt zich vooral op het voorkomen van onbedoelde acties die kunnen optreden bij het klikken of aanraken van een verkeerd element.

Het doel is om ervoor te zorgen dat een gebruiker geen onbedoelde acties uitvoert wanneer ze proberen een interactie te voltooien, bijvoorbeeld door per ongeluk ergens te klikken of te swipen. Dit kan vooral belangrijk zijn voor gebruikers met motorische of cognitieve beperkingen, die mogelijk niet altijd in staat zijn om precies te klikken of te tikken op het juiste moment.

Wat betekent dit in de praktijk? ​

Het betekent dat als een gebruiker een pointeractie (zoals klikken of tikken) uitvoert die een actie start (zoals het verzenden van een formulier of het maken van een aankoop), er altijd een manier moet zijn om die actie te annuleren voordat de bewerking definitief wordt uitgevoerd.

Oplossing voor dit probleem ​

Als een actie die via pointergestures is gestart, ongedaan moet kunnen worden gemaakt, moet je voorzien in een annuleren- of terugknop. Dit kan bijvoorbeeld door een "annuleren"-knop, een mogelijkheid om terug te gaan naar een vorige stap, of door de actie die is gestart ongedaan te maken zonder dat de gebruiker het per ongeluk opnieuw hoeft te proberen.

Voorbeeld van het probleem ​

Stel je voor dat je op een formulier een knop hebt waarmee de gebruiker een aankoop kan doen door op een knop te klikken. Als ze per ongeluk op de knop klikken, moet er een manier zijn om die aankoop ongedaan te maken.

html
<!-- Onjuiste implementatie -->
<form id="purchaseForm">
  <input type="text" placeholder="Productnaam" />
  <input type="number" placeholder="Aantal" />
  <button type="submit">Koop Nu</button>
</form>

<!-- Als de gebruiker per ongeluk op de knop klikt, is er geen manier om de actie te annuleren -->

In dit geval kan de gebruiker per ongeluk op de knop klikken, en zonder mogelijkheid om de actie te annuleren, wordt de aankoop onmiddellijk uitgevoerd.

Oplossing voor dit probleem ​

Een oplossing zou zijn om een bevestigingsknop toe te voegen of een annuleerknop die de gebruiker in staat stelt om de actie te annuleren. Dit kan ook worden gedaan door een bevestigingsdialoogvenster toe te voegen.

html
<!-- Verbeterde implementatie -->
<form id="purchaseForm">
  <input type="text" placeholder="Productnaam" />
  <input type="number" placeholder="Aantal" />
  <button type="button" id="confirmBtn">Koop Nu</button>
  <button type="button" id="cancelBtn">Annuleer</button>
</form>

<script>
  document.getElementById('confirmBtn').addEventListener('click', function () {
    if (confirm('Weet je zeker dat je deze aankoop wilt doen?')) {
      // Voer de aankoop uit
      alert('Aankoop voltooid');
    }
  });

  document.getElementById('cancelBtn').addEventListener('click', function () {
    // Annuleer de actie
    alert('Aankoop geannuleerd');
  });
</script>

In dit geval kan de gebruiker de actie annuleren door de "Annuleer"-knop in te schakelen, of door de aankoop te bevestigen via een pop-up dialoogvenster. Dit biedt de mogelijkheid om een onbedoelde actie te annuleren voordat deze definitief wordt uitgevoerd.

Belangrijke overwegingen ​

  • Bevestiging van actie: Het tonen van een bevestigingsdialoog voordat een actie wordt uitgevoerd (zoals het versturen van een formulier of het doen van een aankoop) is een uitstekende manier om onbedoelde acties te voorkomen.
  • Gebruik van annuleren-knoppen: Zorg ervoor dat er altijd een duidelijke manier is voor de gebruiker om de interactie ongedaan te maken of te annuleren.
  • Herstelbare acties: Als het niet mogelijk is om een actie volledig te annuleren, probeer dan de mogelijkheid te bieden om de gevolgen van die actie te herstellen (bijvoorbeeld door terug te gaan naar een vorige stap).

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: De WAVE Tool kan worden gebruikt om te controleren of gebruikers gemakkelijk interacties kunnen annuleren. WAVE Tool.
  • aXe Accessibility Tool: Deze tool kan helpen om te testen of er voldoende mogelijkheden zijn om pointergestures te annuleren. aXe Tool.

Referenties ​