Hopp til hovedinnhold

Hva leter du etter?

Prøv å søke etter…

Komponenter

Textfield

Textfield gir brukere muligheten til å skrive fritekst eller tall.

Dette må du sjekke selv

Feltet skal ha en synlig label.

Skjermlesere skal presentere ledetekst, beskrivelse og feilmeldinger når feltet får fokus.

Du kan bruke Field for å koble sammen label, beskrivelse og feilmeldinger.

WCAG: 1.3.1 Informasjon og relasjoner (uutilsynet)


Feltet skal ha et tydelig tilgjengelig navn som samsvarer med den synlige label.

Det tilgjengelige navnet skal inneholde den synlige teksten som beskriver feltet. Dette gjør at brukere av talegjenkjenning og skjermlesere kan referere til feltet med samme navn som vises på skjermen.

WCAG: 2.5.3 Ledetekst i navn (uutilsynet)


Obligatoriske felt skal være tydelig merket.

Brukeren skal enkelt kunne forstå hvilke felt som må fylles ut. Følg mønsteret for obligatoriske og valgfrie skjemafelt.

WCAG: 3.3.2 Ledetekster eller instruksjoner (uutilsynet)


Feilmeldinger skal være tydelig knyttet til riktig felt og forklare hvordan feilen kan rettes.

Feilmeldingen skal gjøre det klart hvilket felt som inneholder en feil, hva som er galt og hvordan brukeren kan rette den. Unngå generelle meldinger som «Feil» eller «Ugyldig verdi». Bruk heller konkrete meldinger, for eksempel «E-postadressen må inneholde @».

Se mønsteret for brukerutløste feilmeldinger for anbefalinger om når og hvordan feilmeldinger bør vises.

WCAG: 3.3.1 Identifikasjon av feil (uutilsynet) og 3.3.3 Forslag ved feil (uutilsynet)


Placeholder skal ikke brukes som eneste ledetekst eller til viktig informasjon.

Placeholder forsvinner når brukeren begynner å skrive og blir ikke alltid lest opp av hjelpemidler. Bruk den derfor kun som et eksempel på forventet innhold eller format – se Unngå plassholdertekster.

WCAG: 3.3.2 Ledetekster eller instruksjoner (uutilsynet)


Bruk riktig autocomplete-verdi når feltet gjelder brukeren selv.

Riktig autocomplete gjør det enklere å fylle ut skjema, og er påkrevd for felt som gjelder brukerens egne personopplysninger. Se Formål med inndata for når og hvordan du bruker det.

WCAG: 1.3.5 Identifisere formål med inndata (uutilsynet)


Velg en input-type som passer til informasjonen brukeren skal oppgi.

Riktig input-type gir bedre støtte fra nettleseren og hjelpemidler. Se Input type for anbefalinger og vanlige fallgruver.

WCAG: 1.3.1 Informasjon og relasjoner (uutilsynet) og 4.1.2 Navn, rolle, verdi (uutilsynet)


Viktig informasjon skal ikke kun formidles med prefix eller suffix.

Prefix og suffix blir ikke lest opp av skjermlesere. Dersom informasjonen er nødvendig for å forstå hva brukeren skal fylle inn, skal den også være en del av ledeteksten eller beskrivelsen.

WCAG: 1.3.1 Informasjon og relasjoner (uutilsynet)

Ikke bruk deaktiverte felt

Ikke bruk deaktivert tilstand (disabled) på tekstfelt. Tenk heller over om du trenger å vise feltet i det hele tatt, eller om du heller kan skrive informasjonen ut i ren tekst eller bruke readonly.

Test med tastatur

Sjekk at du kan

  • nå tekstfeltet med Tab
  • skrive inn og redigere tekst med tastaturet
  • markere tekst med Shift + piltastene og kopiere eller erstatte markert tekst
  • nå neste felt med Tab
Rediger denne siden på github.com (åpnes i ny fane)