Autocomplete in een formulier
Het HTML-attribuut autocomplete vertelt aan de browser welke waarde verwacht wordt bij het invullen van een formulierveld. Browsers kunnen voor gebruikers onthouden wat ze eerder hebben ingevuld.
Die opgeslagen waarden kunnen browsers gebruiken om velden vast in te vullen, door het autocomplete attribuut weten ze welke velden dat moeten zijn. Gegevens zoals namen, adres en telefoonnummer kunnen dan automatisch worden ingevuld door de browser.
Autocomplete is fijn voor gebruikers die moeite hebben met typen, problemen hebben met hun geheugen en voor gebruikers die moeite hebben met taal.
Gebruik autocomplete als er een waarde voor is gedefinieerd
WCAG bevat een volledige lijst van waarden voor autocomplete. Gebruik altijd een autocomplete-attribuut als er een waarde voor een formulierveld gedefinieerd is in deze lijst.
Jules Ernst van 200 OK heeft van deze lijst een Nederlandse interpretatie gemaakt.
Belangrijk bij het gebruik van autocomplete is dat het label altijd zichtbaar moet blijven, de gebruiker moet weten of de juiste waarde in het juiste veld is ingevoerd. Zie hiervoor de richtlijn Zorg ervoor dat het label altijd zichtbaar is.
Het gebruik van het juiste autocomplete-attribuut is nodig om te voldoen aan het WCAG-succescriterium 1.3.5 Identificeer het doel van de input (niveau AA).
Let op: aria-autocomplete heeft een ander doel en ander gebruik dan autocomplete bij formuliervelden. aria-autocomplete wordt gebruikt in webcomponenten, bijvoorbeeld om aan te geven dat er suggesties zijn bij zoekresultaten.
Doen
Het autocomplete-attribuut gebruiken.
<label for="voornaam">Je voornaam</label><input id="voornaam" type="text" autocomplete="given-name"/>
Niet doen
Het autocomplete-attribuut niet gebruiken.
Het input type alleen is hier niet voldoende om te voldoen aan WCAG.<label for="telefoon">Uw telefoonnummer</label><input id="telefoon" type="tel"/>
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.