Autocomplete in formulieren: sneller invullen voor iedereen

Voor iemand met een motorische beperking kost elk getypt teken moeite. Voor iemand met dyslexie is een e-mailadres foutloos overtypen een klein karwei. Voor iemand met geheugenproblemen is de eigen postcode niet altijd paraat. De browser kan dat allemaal overnemen: hij kent de gegevens al en vult ze in één tik in. Maar alleen als het formulier aangeeft welk veld wat is. Dat doet u met autocomplete in een formulier. Het is een kleine aanpassing in de code, en een van de weinige toegankelijkheidsverbeteringen die vrijwel iedere bezoeker meteen merkt.

Hoe autocomplete werkt

Browsers en wachtwoordmanagers bewaren gegevens die u vaker invult: naam, adres, telefoonnummer, e-mail, soms betaalgegevens. Komen ze een formulier tegen, dan proberen ze te raden welk veld wat is. Dat raden gaat op basis van de naam van het veld, het label en andere aanwijzingen, en het gaat geregeld mis. Een veld “Plaats” krijgt dan een straatnaam, of de voornaam belandt in het veld voor de achternaam.

Met het attribuut autocomplete hoeft de browser niet te raden. U vertelt precies wat het veld verwacht:

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

Wat WCAG 1.3.5 vraagt

Succescriterium 1.3.5, “identificeer het doel van de invoer”, hoort bij niveau AA en is toegevoegd in WCAG 2.1. Het vraagt: als een veld informatie over de bezoeker zelf vraagt, en het doel staat in de lijst met invoerdoelen van WCAG, dan moet dat doel in de code te herkennen zijn. Voor html betekent dat in de praktijk: het juiste autocomplete-attribuut.

Het gaat dus om gegevens over de persoon die het formulier invult. Bij een veld voor het adres van iemand anders, zoals een cadeau-ontvanger, geldt de eis niet op dezelfde manier, al is autocomplete daar ook handig.

Naast het gemak heeft het een tweede doel: hulpsoftware kan een veld met een bekend doel herkennen en er bijvoorbeeld een vertrouwd icoon naast zetten. Voor mensen die moeite hebben met lezen, maakt dat het formulier begrijpelijker.

De waarden die u het vaakst nodig heeft

Bij een bezorg- en factuuradres op dezelfde pagina kunt u een voorvoegsel gebruiken: autocomplete="shipping postal-code" en autocomplete="billing postal-code". Zo weet de browser welk adres waar hoort.

Het Nederlandse adres: straat en huisnummer apart

Nederlandse formulieren vragen vaak postcode en huisnummer in aparte velden, waarna een plugin de straat en plaats opzoekt. Daar zit een knelpunt: er bestaat geen standaardwaarde voor alleen het huisnummer. Een paar praktische keuzes:

• Geef het postcodeveld postal-code. Dat werkt altijd.
• Laat het huisnummerveld zonder autocomplete-waarde, of gebruik geen waarde die de browser verkeerd invult. address-line1 op een huisnummerveld leidt ertoe dat de volledige straatnaam erin komt.
• Geef de automatisch ingevulde straat- en plaatsvelden de juiste waarden, zodat de browser ze correct kan opslaan.

Controleer na het instellen met uw eigen browser of het resultaat klopt. Postcodeplugins verschillen hierin, en het is goed mogelijk dat de plugin zelf al iets instelt.

Wachtwoordmanagers en inloggen

Voor inlogformulieren is autocomplete minstens zo belangrijk. Met username en current-password herkent een wachtwoordmanager het formulier en vult het in. Bij registreren of wachtwoord wijzigen gebruikt u new-password, zodat de manager een sterk wachtwoord kan voorstellen.

Zet autocomplete nooit uit op wachtwoordvelden (autocomplete="off") om “veiligheidsredenen”. Dat dwingt bezoekers om wachtwoorden te onthouden en te typen, wat leidt tot zwakkere wachtwoorden en het is voor mensen met een cognitieve beperking een echte drempel. WCAG 2.2 heeft daar een eigen criterium over; meer daarover in toegankelijk inloggen zonder puzzel.

Autocomplete in WordPress en WooCommerce

De standaard checkoutvelden van WooCommerce krijgen in de regel al passende autocomplete-waarden mee. Het gaat vaker mis bij:

• Extra velden die met een plugin aan de checkout zijn toegevoegd.
• Postcode- en adresplugins die de velden herschikken.
• Contact- en offerteformulieren gemaakt met een formulierplugin. In Gravity Forms en WPForms kunt u autocomplete per veld instellen of staat het bij standaardvelden al aan; in andere plugins moet het soms via een eigen attribuut of een klein stukje code.
• Formulieren in page builders.

Fouten die we vaak zien

• Een verkeerde waarde. autocomplete="name" op een veld dat alleen de voornaam vraagt. De browser vult dan de volledige naam in.
• Een zelfbedachte waarde. autocomplete="telefoon" of autocomplete="postcode" doet niets. Alleen de Engelse waarden uit de html-standaard werken.
• Overal “off”. Sommige thema’s of plugins zetten autocomplete standaard uit op het hele formulier. Dat schakelt ook de hulp uit voor mensen die er afhankelijk van zijn.
• Dubbel vragen. Een factuuradres dat opnieuw moet worden getypt, terwijl het bezorgadres al is ingevuld. Een vinkje “Zelfde als bezorgadres” lost dat op. WCAG 2.2 vraagt dit ook, in criterium 3.3.7 over overbodige invoer.

Hoe u dit en de rest van de bestelstroom aanpakt, leest u op uw webshop toegankelijk maken.

Zo controleert u het zelf

1. Open een formulier en klik in het eerste veld. Stelt de browser uw gegevens voor? Kies ze en kijk of alles in het goede veld belandt.
2. Klik met de rechtermuisknop op een veld en kies “Inspecteren”. Staat er een autocomplete-attribuut met een waarde uit de tabel hierboven?
3. Controleer ook de velden voor het adres, het inloggen en het registreren.

Gebruikt u nog formulieren met alleen een placeholder in plaats van een label, pak dat dan meteen mee, want na automatisch invullen is anders niet meer te zien welk veld wat is. Zie waarom een placeholder geen label is. Meer over formulieren in het algemeen staat op toegankelijke formulieren, en het complete overzicht op digitale toegankelijkheid.