Autofullfør i skjema

Har du noen gang fylt ut et langt bestillingsskjema på mobilen og tenkt «Hvorfor husker ikke nettleseren dette?» Sjansen er stor for at nettsiden mangler et lite, men viktig attributt: autocomplete. Det er ikke bare en bekvemmelighet – det er faktisk et krav i WCAG-standarden.

Hva betyr dette?

WCAG 2.1, suksesskriterium 1.3.5 «Identifiser formål med inndata», krever at skjemafelt som samler inn informasjon om brukeren skal ha et autocomplete-attributt som beskriver feltets formål. Dette gjelder typiske personlige opplysninger som navn, e-post, adresse, telefonnummer og betalingsdetaljer.

Når du legger til autocomplete-attributtet, forteller du nettleseren nøyaktig hva slags data feltet forventer. Nettleseren kan da tilby å fylle ut feltet automatisk med data brukeren har lagret fra før.

For brukere som har hjelpemidler kan dette attributtet også brukes til å vise gjenkjennelige ikoner eller etiketter ved siden av feltene. For eksempel kan et felt med autocomplete="email" vises med et e-post-ikon, noe som gjør det enklere å forstå hva som forventes.

Hvorfor er det viktig?

Spart tid for alle

De fleste brukere setter pris på å slippe å skrive inn navn, adresse og e-post om og om igjen. Autofullfør reduserer antall tastetrykk og gjør utfylling av skjemaer mye raskere.

Færre feil

Når nettleseren fyller ut feltene, reduseres risikoen for skrivefeil. Det betyr færre avviste bestillinger på grunn av feil i adressefeltet, og færre brukere som skriver feil e-postadresse og dermed aldri får ordrebekreftelsen.

Avgjørende for mange med funksjonsnedsettelser

For personer med motoriske utfordringer kan hvert tastetrykk være krevende. Autofullfør betyr at de slipper å skrive inn de samme opplysningene mange ganger. For personer med kognitive vansker kan det å huske og skrive riktig informasjon være en reell barriere – autofullfør fjerner denne barrieren.

Bedre konvertering

For nettbutikker og tjenesteleverandører fører enklere skjemautfylling direkte til høyere konverteringsrate. Færre som avbryter kjøpet betyr mer omsetning.

Hvordan fikser jeg det?

Løsningen er enkel: legg til autocomplete-attributtet på relevante skjemafelt. Her er de vanligste verdiene du bør kjenne til:

Vanlige autocomplete-verdier

Eksempel: Kontaktskjema

<form>
  <label for="navn">Fullt navn</label>
  <input type="text" id="navn" name="navn" autocomplete="name">

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

  <label for="telefon">Telefonnummer</label>
  <input type="tel" id="telefon" name="telefon" autocomplete="tel">

  <label for="adresse">Gateadresse</label>
  <input type="text" id="adresse" name="adresse" autocomplete="street-address">

  <label for="postnr">Postnummer</label>
  <input type="text" id="postnr" name="postnr" autocomplete="postal-code">

  <button type="submit">Send inn</button>
</form>

Eksempel: Innlogging

<form>
  <label for="brukernavn">Brukernavn eller e-post</label>
  <input type="text" id="brukernavn" name="brukernavn" autocomplete="username">

  <label for="passord">Passord</label>
  <input type="password" id="passord" name="passord" autocomplete="current-password">

  <button type="submit">Logg inn</button>
</form>

Vanlige feil å unngå

Ikke sett autocomplete="off" uten god grunn. Mange utviklere deaktiverer autofullfør fordi de synes det ser rotete ut, men dette straffer brukerne. Nettlesere kan dessuten velge å ignorere autocomplete="off" for innloggingsfelt av sikkerhetshensyn.

Bruk riktig verdi. Hvis du setter autocomplete="name" på et e-postfelt, vil nettleseren foreslå feil informasjon. Pass på at verdien matcher feltets faktiske formål.

Ikke glem type-attributtet. Kombinasjonen av type og autocomplete gir nettleseren best mulig informasjon. Bruk type="email" sammen med autocomplete="email", type="tel" sammen med autocomplete="tel", og så videre.

Hvem påvirkes av dette kravet?

Dette kravet i WCAG er på nivå AA og bør inngå i standard kvalitetssikring av skjemaer, både for tilgjengelighet og bedre fullføringsrate. Men uavhengig av lovkrav – det er rett og slett god brukeropplevelse å gjøre skjemaer så enkle som mulig å fylle ut.

Bruk et verktøy som UUKontroll for å sjekke om skjemafeltene dine mangler autocomplete-attributtet, og fiks det med de riktige verdiene fra tabellen over. Det tar som regel bare noen minutter og gjør en reell forskjell for brukerne dine.