Ga naar hoofdinhoud

WCAG-succescriterium 1.3.5 Identificeer het doel van de input

Niveau AA

Een bezoeker die een formulier invult, krijgt velden voor naam, adres, e-mailadres en creditcardnummer aangeboden. De browser herkent die velden en biedt aan om ze automatisch in te vullen met opgeslagen gegevens. Dat scheelt tijd, voorkomt typefouten en is essentieel voor bezoekers die moeite hebben met typen of met het onthouden van gegevens.

Automatisch invullen werkt alleen als het invoerveld een autocomplete-attribuut heeft met de juiste waarde. Zonder dat attribuut herkent de browser het veld niet en kan het niet automatisch worden ingevuld. Het autocomplete-attribuut maakt het ook mogelijk om iconen of labels bij velden te tonen die de bezoeker helpen begrijpen wat er wordt verwacht — onafhankelijk van de taal van de pagina.

Dit succescriterium geldt voor invoervelden die persoonlijke gegevens van de bezoeker verzamelen. Bekijk de volledige lijst van geldige waarden.

Veelgemaakte fouten

Invoerveld voor persoonlijke gegevens mist een autocomplete-attribuut

Een formulier vraagt om naam, adres, e-mailadres of andere persoonlijke gegevens, maar de velden hebben geen autocomplete-attribuut. De browser kan de velden niet automatisch invullen. De bezoeker moet alles handmatig typen, ook als de browser de gegevens al heeft opgeslagen.

Hoe te testen: inspecteer het veld in de DevTools en controleer of het autocomplete-attribuut aanwezig is.

Niet doen

Adresvelden zonder autocomplete

<label for="naam">Volledige naam</label>
<input type="text" id="naam" />


<label for="email">E-mailadres</label>
<input type="email" id="email" />


<label for="straat">Straat en huisnummer</label>
<input type="text" id="straat" />


<label for="postcode">Postcode</label>
<input type="text" id="postcode" />

Doen

Adresvelden met autocomplete

<label for="naam">Volledige naam</label>
<input type="text" id="naam" autocomplete="name" />


<label for="email">E-mailadres</label>
<input type="email" id="email" autocomplete="email" />


<label for="straat">Straat en huisnummer</label>
<input type="text" id="straat" autocomplete="street-address" />


<label for="postcode">Postcode</label>
<input type="text" id="postcode" autocomplete="postal-code" />

Wie kan dit oplossen: een developer voegt het juiste autocomplete-attribuut toe aan elk veld dat persoonlijke gegevens verzamelt. Bij sommige contentmanagementsystemen kan de webredactie dit attribuut toevoegen.

Autocomplete-waarde is onjuist

Een veld heeft een autocomplete-attribuut, maar met een verkeerde waarde. Een veld voor het e-mailadres heeft autocomplete="e-mail", of een veld voor de achternaam heeft autocomplete="given-name". De browser vult dan de verkeerde gegevens in.

Hoe te testen: klik in een veld en accepteer de autocomplete-suggestie van de browser. Worden de juiste gegevens ingevuld? Inspecteer het veld in de DevTools en controleer of de autocomplete-waarde overeenkomt met wat het veld vraagt.

Niet doen

Verkeerde autocomplete-waarde

<!-- Veld vraagt om achternaam, maar autocomplete verwijst naar voornaam -->
<label for="achternaam">Achternaam</label>
<input type="text" id="achternaam" autocomplete="given-name" />

Doen

Correcte autocomplete-waarde

<label for="achternaam">Achternaam</label>
<input type="text" id="achternaam" autocomplete="family-name" />

Wie kan dit oplossen: een developer controleert de autocomplete-waarde van elk veld aan de hand van de lijst met geldige waarden.

Autocomplete is uitgeschakeld op velden voor persoonlijke gegevens

Een formulier heeft autocomplete="off" op velden die persoonlijke gegevens vragen. De browser mag de velden niet automatisch invullen. De bezoeker moet alles handmatig typen. Developers doen dit vaak om beveiligingsredenen, maar voor de meeste velden is het niet nodig en het maakt het formulier onnodig moeilijk te gebruiken.

Hoe te testen: inspecteer de velden in de DevTools. Staat er autocomplete="off" op velden voor naam, adres, e-mail of telefoonnummer?

Niet doen

Autocomplete uitgeschakeld op een naamveld

<label for="naam">Volledige naam</label>
<input type="text" id="naam" autocomplete="off" />

Doen

Autocomplete ingeschakeld met de juiste waarde

<label for="naam">Volledige naam</label>
<input type="text" id="naam" autocomplete="name" />

Bij wachtwoordvelden voor een nieuw wachtwoord gebruik je autocomplete="new-password". Dat signaleert aan de browser en wachtwoordmanagers dat het om een nieuw wachtwoord gaat, niet om een bestaand wachtwoord dat moet worden ingevuld.

Wie kan dit oplossen: een developer vervangt autocomplete="off" door de juiste autocomplete-waarde.

Betaalvelden missen autocomplete

Een betaalformulier vraagt om kaartnummer, vervaldatum en naam op de kaart. Zonder autocomplete moet de bezoeker de gegevens handmatig invoeren. Wachtwoordmanagers en browsers kunnen betaalgegevens automatisch invullen als de juiste autocomplete-waarden aanwezig zijn.

Hoe te testen: klik in het kaartnummerveld. Biedt de browser of wachtwoordmanager aan om de betaalgegevens in te vullen?

Niet doen

Betaalvelden zonder autocomplete

<label for="kaartnummer">Kaartnummer</label>
<input type="text" id="kaartnummer" />


<label for="vervaldatum">Vervaldatum</label>
<input type="text" id="vervaldatum" />


<label for="naam-kaart">Naam op de kaart</label>
<input type="text" id="naam-kaart" />

Doen

Betaalvelden met autocomplete

<label for="kaartnummer">Kaartnummer</label>
<input type="text" id="kaartnummer" autocomplete="cc-number" />


<label for="vervaldatum">Vervaldatum</label>
<input type="text" id="vervaldatum" autocomplete="cc-exp" />


<label for="naam-kaart">Naam op de kaart</label>
<input type="text" id="naam-kaart" autocomplete="cc-name" />

Wie kan dit oplossen: een developer voegt de juiste autocomplete-waarden toe aan de betaalvelden.

Inlogvelden missen autocomplete

Een inlogformulier vraagt om een e-mailadres en wachtwoord. De velden hebben geen autocomplete-attribuut. De browser en wachtwoordmanagers kunnen de opgeslagen inloggegevens niet automatisch invullen.

Hoe te testen: open een inlogpagina. Inspecteer de invoervelden in de DevTools.

Niet doen

Inlogvelden zonder autocomplete

<label for="email">E-mailadres</label>
<input type="email" id="email" />


<label for="wachtwoord">Wachtwoord</label>
<input type="password" id="wachtwoord" />

Doen

Inlogvelden met autocomplete

<label for="email">E-mailadres</label>
<input type="email" id="email" autocomplete="username" />


<label for="wachtwoord">Wachtwoord</label>
<input type="password" id="wachtwoord" autocomplete="current-password" />

Bij een registratieformulier gebruik je autocomplete="new-password" voor het wachtwoordveld. Dat signaleert aan de browser dat het om een nieuw wachtwoord gaat en biedt aan om een sterk wachtwoord te genereren.

Wie kan dit oplossen: een developer voegt autocomplete="username" en autocomplete="current-password" toe aan het inlogformulier en autocomplete="new-password" aan het registratieformulier.

Advies: Afwijkend afleveradres en factuuradres delen dezelfde autocomplete-waarden

Een bestelformulier heeft een afleveradres en een factuuradres. Beide secties gebruiken dezelfde autocomplete-waarden. De browser vult dan hetzelfde adres in bij beide secties.

Hoe te testen: vul een bestelformulier in met een afwijkend aflever- en factuuradres. Biedt de browser de juiste adressen aan bij de juiste secties?

Niet doen

Twee adressecties met dezelfde autocomplete-waarden

<!-- Afleveradres -->
<label for="aflever-straat">Straat</label>
<input type="text" id="aflever-straat" autocomplete="street-address" />


<!-- Factuuradres -->
<label for="factuur-straat">Straat</label>
<input type="text" id="factuur-straat" autocomplete="street-address" />

Doen

Adressecties onderscheiden met shipping en billing

<!-- Afleveradres -->
<label for="aflever-straat">Straat</label>
<input type="text" id="aflever-straat" autocomplete="shipping street-address" />


<!-- Factuuradres -->
<label for="factuur-straat">Straat</label>
<input type="text" id="factuur-straat" autocomplete="billing street-address" />

De prefixen shipping en billing vertellen de browser welk adres bij welke sectie hoort.

Wie kan dit oplossen: een developer voegt de juiste prefix toe aan de autocomplete-waarden van de adresvelden.

Hoe te testen

Voor iedereen

  1. Open een formulier dat persoonlijke gegevens vraagt, zoals naam, adres, e-mail, telefoon en betaalgegevens. Klik in de velden. Biedt de browser aan om ze automatisch in te vullen? Dat de browser iets aanbiedt, betekent nog niet dat het attribuut aanwezig en correct ingesteld is.
  2. Accepteer de suggestie van de browser. Worden de juiste gegevens in de juiste velden ingevuld?
  3. Test een bestelformulier met een afwijkend aflever- en factuuradres. Worden de adressen bij de juiste secties ingevuld?
  4. Test een inlogpagina. Biedt de browser of wachtwoordmanager de opgeslagen gegevens aan?

Voor developers

  1. Inspecteer elk invoerveld dat persoonlijke gegevens verzamelt in de DevTools. Heeft het veld een autocomplete-attribuut met een geldige waarde?
  2. Controleer of de autocomplete-waarde overeenkomt met wat het veld vraagt. Vergelijk met de lijst met geldige waarden.
  3. Zoek in de broncode naar autocomplete="off" op velden voor persoonlijke gegevens. Vervang die door de juiste waarde.
  4. Advies: Controleer bestelformulieren met meerdere adressecties. Hebben de secties de juiste shipping of billing prefix?
  5. Gebruik axe DevTools of Lighthouse voor een eerste scan. Ontbrekende autocomplete-attributen op veelvoorkomende veldtypen worden automatisch gedetecteerd.

Veelgebruikte autocomplete-waarden

Waarde Veld
name Volledige naam
given-name Voornaam
family-name Achternaam
email E-mailadres
tel Telefoonnummer
street-address Straat en huisnummer
postal-code Postcode
country-name Land
organization Organisatie
username Gebruikersnaam of e-mailadres bij inlog
current-password Huidig wachtwoord bij inlog
new-password Nieuw wachtwoord bij registratie of wijziging
cc-number Creditcardnummer
cc-exp Vervaldatum creditcard
cc-name Naam op de creditcard
bday Geboortedatum

Gerelateerde succescriteria

  • 1.3.1 Info en relaties: labels zijn programmatisch gekoppeld aan hun invoerveld. Autocomplete voegt daar het doel van het veld aan toe.
  • 3.3.2 Labels of instructies: zichtbare labels beschrijven wat er in een veld moet worden ingevuld. Autocomplete helpt de browser om het veld automatisch in te vullen op basis van die beschrijving.
  • 3.3.7 Overbodige invoer: informatie die de bezoeker eerder heeft ingevuld, wordt automatisch aangeboden. Autocomplete is een van de manieren om dit te realiseren.

Gerelateerde NL Design System-richtlijn

Formulieren: Autocomplete in een formulier.

Bronnen

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C-referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.