Campus Design System

Appearance

3.3.7 Redundante invoer niveau A ​

Uitleg ​

Het WCAG-criterium 3.3.7 Redundante Invoer vereist dat indien een gebruiker een formulier meerdere keren dezelfde gegevens moet invoeren, de gebruiker de mogelijkheid heeft om deze informatie automatisch in te vullen (of te kiezen) op basis van eerdere invoer, zoals via auto-aanvullen of het hergebruiken van al eerder ingevoerde gegevens. Dit verbetert de gebruiksvriendelijkheid en toegankelijkheid door onnodige herhaling te vermijden, wat vooral nuttig is voor gebruikers met motorische beperkingen of gebruikers die moeite hebben met het invoeren van gegevens.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker bijvoorbeeld een formulier invult om zich te registreren voor een website, kan het zijn dat de gebruiker zijn naam, e-mailadres en andere gegevens meerdere keren moet invullen (bijvoorbeeld in een accountinstelling, op een facturatiepagina, en op een verzendpagina). Het vermijden van redundante invoer betekent dat de gebruiker de mogelijkheid krijgt om informatie die al eerder is ingevuld, automatisch opnieuw in te vullen, bijvoorbeeld door het gebruik van autofill-opties.

Het doel van dit criterium is om de last voor de gebruiker te verlichten, vooral als het formulier veel velden bevat en de gebruiker dezelfde informatie meerdere keren moet invullen.

Voorbeeld van het probleem ​

Stel je voor dat een gebruiker zich aanmeldt voor een nieuwe online winkel en eerst zijn naam en adres invult voor de registratie. Daarna wordt hij gevraagd om dezelfde naam en hetzelfde adres in te vullen voor de verzend- en facturatiegegevens. Dit is een voorbeeld van redundante invoer.

html
<form action="/register" method="POST">
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name" placeholder="Vul je naam in" />

  <label for="address">Adres:</label>
  <input type="text" id="address" name="address" placeholder="Vul je adres in" />

  <button type="submit">Registreer</button>
</form>

<form action="/billing" method="POST">
  <label for="billing-name">Naam (Facturatie):</label>
  <input type="text" id="billing-name" name="billing-name" placeholder="Vul je naam in" />

  <label for="billing-address">Adres (Facturatie):</label>
  <input type="text" id="billing-address" name="billing-address" placeholder="Vul je adres in" />

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

In dit geval moet de gebruiker zijn naam en adres meerdere keren invullen, wat onnodig en tijdrovend is.

Oplossing voor dit probleem ​

De oplossing is om gebruikers de mogelijkheid te bieden om eerder ingevoerde gegevens automatisch in te vullen, bijvoorbeeld door het gebruik van de autofill-functionaliteit van de browser. Hierdoor hoeven gebruikers dezelfde informatie niet meerdere keren in te vullen.

html
<form action="/register" method="POST">
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name" placeholder="Vul je naam in" autocomplete="name" />

  <label for="address">Adres:</label>
  <input type="text" id="address" name="address" placeholder="Vul je adres in" autocomplete="address-line1" />

  <button type="submit">Registreer</button>
</form>

<form action="/billing" method="POST">
  <label for="billing-name">Naam (Facturatie):</label>
  <input type="text" id="billing-name" name="billing-name" placeholder="Vul je naam in" autocomplete="name" />

  <label for="billing-address">Adres (Facturatie):</label>
  <input
    type="text"
    id="billing-address"
    name="billing-address"
    placeholder="Vul je adres in"
    autocomplete="address-line1"
  />

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

In dit geval heeft de browser de mogelijkheid om de ingevulde naam en adres automatisch aan te vullen op basis van de gegevens die al eerder zijn ingevuld. Dit verlaagt de belasting voor de gebruiker, vooral als de informatie hetzelfde blijft voor de verschillende formulieren.

Voorbeeld van automatische aanvulling via de browser ​

De meeste moderne browsers ondersteunen autofill-functionaliteit voor veelgebruikte invoervelden. Als de gebruiker bijvoorbeeld zijn naam, adres, of andere gegevens heeft ingevuld in eerdere formulieren, kan de browser deze gegevens onthouden en automatisch invullen voor de gebruiker bij het invullen van andere formulieren.

Belangrijke overwegingen ​

  • Veldattributen: Zorg ervoor dat je de juiste autocomplete-attributen gebruikt voor de invoervelden, zodat browsers de gegevens correct kunnen herkennen en automatisch aanvullen.

  • Consistentie: Gebruik consistente veldnamen en plaatsingen voor dezelfde gegevens (bijvoorbeeld naam en adres), zodat de browser de juiste velden kan koppelen.

  • Zichtbaarheid van ingevulde gegevens: Het is belangrijk dat de gebruiker kan zien welke gegevens automatisch zijn ingevuld door de browser en de mogelijkheid heeft om ze te bewerken of te annuleren.

Testen en hulpmiddelen ​

  • Browser Developer Tools: Gebruik de ontwikkelaarstools van een browser (zoals Google Chrome DevTools) om te controleren of de autofill-functionaliteit correct werkt.
  • WAVE Accessibility Tool: WAVE kan helpen bij het controleren of er redundante invoervelden aanwezig zijn die niet geoptimaliseerd zijn voor autofill. WAVE Tool.

Referenties ​