Bruk av placeholder-attributtet

Placeholder attributten representere et kort hint med intensjon om å hjelpe brukeren med data utfylling. Dessverre er det en del problemer som stopper den fra å gjøre akkurat dette i flere tilfeller.

Hvorfor unngå placeholders

Selv om placeholders kan virke som en kjempegod snarvei for å gi brukeren enkel og praktisk informasjon, vil det i enkelte tilfeller føre til dårlige brukeropplevelser.

  • En placeholder forsvinner når feltet blir utfylt. Dette kan være spesielt utfordrende for personer med kognitive vansker (f.eks. hukommelse).

    Hvor langt måtte passordet være?...
  • Ikke alle skjermlesere leser opp placeholder.

  • Har dårlig kontrast. WCAG krever at tekst skal ha en kontrast på 4,5:1, men om man forsøker å oppfylle dette kravet her vil det bli vanskelig å se at det faktisk er en placeholder og ikke vanlig tekst som er skrevet i input-feltet. Heller ikke alle nettlesere støtter styling av placeholder.

    Eksempelvideo som viser hvorfor styling og høy kontrast av placeholder kan være upraktisk.
    Er adressen allerede utfylt?...
  • Kan være vanskelig å skjønne i høykontrastmodus.

  • Blir ikke oversatt med auto-translate.

Alternativ

Vår anbefaling er å heller bruke vanlige labels, description-propen eller Hjelpetekst-komponenter i nærheten av feltet.

8-16 Characters, containing atleast 2 numbers
  Gjør dette
  Ikke gjør dette

  Gjør dette
  Ikke gjør dette

Mer om Placeholders

Bruk og erfaringer fra Mozilla (MDN web docs)

Artikkel om bruk av placeholders (Smashing Magazine)