Campus Design System

Appearance

3.2.2 Bij Invoer niveau A ​

Uitleg ​

Het WCAG-criterium 3.2.2 Bij Invoer vereist dat de inhoud van de pagina niet onverwacht verandert wanneer een gebruiker invoer geeft, zoals het typen in een tekstveld, het selecteren van een optie uit een dropdown of het klikken op een keuzevakje. Net zoals bij het criterium 3.2.1 Bij Focus, mag de inhoud niet automatisch veranderen als gevolg van een invoeractie zonder dat de gebruiker expliciet gevraagd wordt of begrijpt waarom de verandering plaatsvindt.

Dit is essentieel om te voorkomen dat een gebruiker per ongeluk onbedoelde acties uitvoert die verwarring veroorzaken, vooral bij gebruikers die hulpmiddelen zoals schermlezers gebruiken, of bij mensen met cognitieve beperkingen.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker gegevens invoert in een formulier, bijvoorbeeld bij het typen in een tekstvak of het selecteren van een optie, mag de pagina niet automatisch veranderen, zoals het direct tonen van een pop-up, het versturen van een formulier, of het aanpassen van de inhoud zonder dat de gebruiker daar om heeft gevraagd of geïnformeerd is.

Als een gebruiker bijvoorbeeld zijn e-mailadres invoert en de inhoud van de pagina plotseling verandert of een formulier automatisch wordt verzonden, kan dit leiden tot verwarring of frustratie bij de gebruiker. Dit soort onverwachte veranderingen kan ook problematisch zijn voor gebruikers die schermlezers gebruiken, omdat zij mogelijk niet begrijpen wat er gebeurt of waarom de inhoud verandert.

Voorbeeld van het probleem ​

Stel je voor dat een formulier een tekstveld heeft voor het invoeren van een e-mailadres, maar zodra de gebruiker begint te typen, wordt het formulier automatisch verzonden, wat een onverwachte en onwenselijke verandering veroorzaakt.

html
<form>
  <input type="email" id="email" placeholder="E-mail" />
  <button type="submit">Verzenden</button>
</form>

<script>
  document.getElementById('email').addEventListener('input', function () {
    document.querySelector('form').submit(); // Formulier wordt verzonden zodra er iets wordt ingevoerd
  });
</script>

In dit voorbeeld wordt het formulier automatisch verzonden wanneer de gebruiker begint te typen in het e-mailveld, wat verwarrend is voor de gebruiker, vooral als dit gebeurt zonder waarschuwing of bevestiging.

Oplossing voor dit probleem ​

Om te voldoen aan dit criterium, moet je ervoor zorgen dat inhoud alleen verandert op een manier die de gebruiker begrijpt en alleen na een expliciete actie van de gebruiker, zoals het klikken op een knop of het indienen van een formulier.

In plaats van de automatische actie, zoals het verzenden van het formulier, moet je ervoor zorgen dat de gebruiker een handeling uitvoert om de wijziging in te dienen of de actie te bevestigen. Een mogelijke oplossing zou kunnen zijn:

html
<form id="formulier">
  <input type="email" id="email" placeholder="E-mail" />
  <button type="submit">Verzenden</button>
</form>

<script>
  // Alleen verzenden wanneer de gebruiker op de knop klikt
  document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault();
    alert('Het formulier wordt nu verzonden.');
    // Voer het formulier in
    this.submit();
  });
</script>

In dit voorbeeld wordt het formulier pas verzonden wanneer de gebruiker expliciet op de verzendknop klikt, niet wanneer de gebruiker begint te typen in het invoerveld.

Belangrijke overwegingen ​

  • Expliciete acties: Veranderingen in de inhoud van de pagina mogen alleen plaatsvinden als gevolg van expliciete acties van de gebruiker, zoals het klikken op een knop of het verzenden van een formulier. Automatische acties, zoals het wijzigen van de inhoud op basis van het typen in een veld, moeten worden vermeden.

  • Dynamische inhoud: Als dynamische inhoud (bijvoorbeeld met JavaScript) nodig is om de gebruikerservaring te verbeteren, zorg dan altijd voor voldoende communicatie naar de gebruiker, bijvoorbeeld door middel van visuele feedback (zoals een laadindicator) of tekstuele uitleg over wat er gebeurt.

  • Toegankelijkheid: Bij het werken met invoer (zoals tekstvakken, keuzerondjes of selectievakjes) moet de interactie duidelijk en voorspelbaar zijn voor mensen die hulpmiddelen zoals schermlezers of toetsenbordnavigatie gebruiken. Vermijd dat de inhoud plotseling verandert zonder waarschuwing, aangezien dit verwarring kan veroorzaken.

Voorbeeld van toepassing ​

Stel je een formulier voor waarin een gebruiker zijn naam en e-mailadres moet invullen, maar de inhoud van de pagina verandert niet totdat de gebruiker op de verzendknop klikt. Dit zorgt voor een duidelijke en voorspelbare ervaring, die volledig voldoet aan dit criterium.

html
<form id="formulier">
  <input type="text" id="naam" placeholder="Naam" />
  <input type="email" id="email" placeholder="E-mail" />
  <button type="submit">Verzenden</button>
</form>

<script>
  // Geen automatische acties
  document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault();
    alert('Het formulier wordt nu verzonden.');
    // Pas dan het formulier in
    this.submit();
  });
</script>

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of invoeracties leiden tot onverwachte veranderingen op de pagina. WAVE Tool.
  • Axe Accessibility Tool: aXe biedt hulpmiddelen om te testen op automatische inhoudsveranderingen bij invoer. Axe Tool.
  • Chrome DevTools: Gebruik de Chrome Developer Tools om in real-time te testen of er onverwachte wijzigingen plaatsvinden bij invoer.

Referenties ​