3.3.4 Foutpreventie (Juridisch, Financieel, Gegevens) niveau AA

Uitleg

Het WCAG-criterium 3.3.4 Foutpreventie (Juridisch, Financieel, Gegevens) vereist dat gebruikers de mogelijkheid krijgen om een actie die gevolgen kan hebben op juridisch, financieel of andere belangrijke gegevens, te herzien, te corrigeren of te annuleren voordat de actie definitief wordt uitgevoerd. Dit criterium is van toepassing op acties die belangrijke, niet-herstelbare gevolgen kunnen hebben, zoals het doen van een betaling, het indienen van een juridisch document, of het verstrekken van gevoelige gegevens.

Dit is een belangrijk aspect van toegankelijkheid omdat het ervoor zorgt dat gebruikers niet onbedoeld fouten maken die negatieve gevolgen kunnen hebben, zoals het verlies van geld, verlies van privacy, of juridische complicaties. Het biedt gebruikers een mogelijkheid om te controleren en te bevestigen wat ze hebben ingevuld of de actie die ze gaan uitvoeren, voordat deze onomkeerbaar is.

Wat betekent dit in de praktijk?

Stel je voor dat een gebruiker een formulier invult om een grote betaling te doen of een juridisch document in te dienen. Als er geen mogelijkheid is om de gegevens te herzien of te corrigeren voordat de actie definitief wordt uitgevoerd, kan dit leiden tot ernstige gevolgen voor de gebruiker.

Een voorbeeld van foutpreventie is het aanbieden van een bevestigingspagina voordat een gebruiker een betaling doet of een formulier indient, zodat ze hun gegevens kunnen controleren. Een ander voorbeeld is het toevoegen van een annuleerknop bij gevoelige acties, zodat de gebruiker kan terugkeren en hun actie kan stoppen voordat de gevolgen plaatsvinden.

Voorbeeld van het probleem

Als een gebruiker een formulier invult om een betaling te doen, zonder de mogelijkheid om de ingevoerde gegevens te controleren, kan dit leiden tot fouten. Bijvoorbeeld, een gebruiker kan per ongeluk een verkeerde betalingsmethode selecteren of verkeerde persoonlijke informatie invoeren.

<!-- Geen foutpreventie -->
<form action="/payment" method="POST">
  <input type="text" id="card-number" name="card-number" placeholder="Creditcardnummer" />
  <input type="text" id="amount" name="amount" placeholder="Bedrag" />
  <button type="submit">Betalen</button>
</form>

In dit geval heeft de gebruiker geen kans om de gegevens te controleren voordat de betaling wordt verwerkt.

Oplossing voor dit probleem

Om te voldoen aan dit criterium, moet de website gebruikers de mogelijkheid bieden om hun invoer te controleren of corrigeren. Dit kan worden bereikt door het tonen van een bevestigingspagina of door een terugknop toe te voegen waarmee gebruikers hun gegevens kunnen herzien of corrigeren.

<!-- Voorbeeld met foutpreventie -->
<form action="/payment" method="POST">
  <input type="text" id="card-number" name="card-number" placeholder="Creditcardnummer" />
  <input type="text" id="amount" name="amount" placeholder="Bedrag" />
  <button type="submit">Doorgaan naar Betalen</button>
</form>

<!-- Bevestigingspagina -->
<h2>Bevestig je betaling</h2>
<p>Cardnummer: 1234 5678 9876 5432</p>
<p>Bedrag: €100,00</p>
<form action="/confirm-payment" method="POST">
  <button type="submit">Bevestig Betaling</button>
  <button type="button" onclick="window.history.back();">Annuleer</button>
</form>

In dit geval krijgt de gebruiker de mogelijkheid om de ingevoerde gegevens te bevestigen voordat de betaling daadwerkelijk wordt uitgevoerd. De gebruiker heeft ook de optie om de betaling te annuleren en terug te gaan naar het formulier om correcties aan te brengen.

Belangrijke overwegingen

• Herziening van gegevens: Wanneer een gebruiker een actie uitvoert die onomkeerbare gevolgen kan hebben, moet er altijd de mogelijkheid zijn om de ingevoerde gegevens te herzien voordat de actie definitief wordt uitgevoerd. Dit is vooral belangrijk bij financiële en juridische handelingen.
• Bevestiging van actie: Zorg ervoor dat er altijd een duidelijke bevestiging is van de actie die de gebruiker gaat ondernemen, inclusief de gevolgen van die actie.
• Annuleermogelijkheid: Bied de gebruiker altijd de mogelijkheid om de actie te annuleren en terug te keren naar het formulier of de pagina waar ze hun gegevens kunnen aanpassen voordat ze de actie uitvoeren.

Voorbeeld van toepassing

Een voorbeeld van foutpreventie in een bankapplicatie kan zijn wanneer de gebruiker een overboeking doet. Voordat de overboeking wordt bevestigd, kan de gebruiker een overzicht van de transactie krijgen, inclusief de details van de ontvanger en het bedrag. De gebruiker heeft dan de mogelijkheid om te bevestigen of te annuleren.

<form action="/transfer" method="POST">
  <label for="recipient">Ontvanger:</label>
  <input type="text" id="recipient" name="recipient" placeholder="Naam ontvanger" />

  <label for="amount">Bedrag:</label>
  <input type="text" id="amount" name="amount" placeholder="Bedrag" />

  <button type="submit">Doorgaan naar Betalen</button>
</form>

<!-- Bevestigingspagina -->
<h2>Bevestig je Overboeking</h2>
<p>Ontvanger: Jan Jansen</p>
<p>Bedrag: €500,00</p>
<form action="/confirm-transfer" method="POST">
  <button type="submit">Bevestig Overboeking</button>
  <button type="button" onclick="window.history.back();">Annuleer</button>
</form>

Testen en hulpmiddelen

• WAVE Accessibility Tool: Gebruik WAVE om te testen of je formulier de mogelijkheid biedt om gegevens te herzien of te corrigeren voordat belangrijke acties worden uitgevoerd. WAVE Tool.
• Axe Accessibility Tool: Axe kan helpen bij het identificeren van formulieracties die geen foutpreventie bevatten. Axe Tool.

Referenties

• WCAG 2.2 Richtlijn 3.3.4 Foutpreventie (Juridisch, Financieel, Gegevens): Voor meer gedetailleerde uitleg en voorbeelden, zie de officiële WCAG-documentatie.