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.

<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" />

<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.

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

<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?

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

<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?

<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" />

<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.

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

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

<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?

<!-- 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" />

<!-- 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

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

• WCAG bevat een volledige lijst van waarden voor autocomplete.
• Jules Ernst van 200 OK heeft van deze lijst een Nederlandse interpretatie van autocomplete gemaakt.

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

• Engelse tekst van het WCAG-succescriterium: 1.3.5 Identify Input Purpose.
• Nederlandse vertaling van het WCAG-succescriterium: 1.3.5 Identificeer het doel van de input.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 1.3.5 Identify Input Purpose.
• Engelstalige toelichting: Understanding SC 1.3.5 Identify Input Purpose.

Help richtlijn verbeteren

Aanvullingen of opmerkingen?

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