Hopp til hovedinnhold

Hva leter du etter?

Prøv å søke etter…

Komponenter

Checkbox

Checkbox gir brukerne mulighet til å velge ett eller flere alternativer. Den kan også brukes i tilfeller der brukeren skal bekrefte noe.

Dette må du sjekke selv

Grupper med valg skal ha en beskrivende legend.

Legend, beskrivelse og feilmeldinger skal være koblet til gruppen slik at de blir tilgjengelige for hjelpemidler.

Du kan bruke Fieldset for å koble sammen legend, beskrivelse og feilmeldinger.

WCAG: 1.3.1 Informasjon og relasjoner (uutilsynet)


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

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)


Checkbox uten synlig label skal ha et tilgjengelig navn.

Dette gjelder for eksempel når en checkbox brukes i en tabell og navnet må hentes fra innholdet i raden eller kolonnen.

Det tilgjengelige navnet skal gjøre det tydelig hva avhukingen gjelder.

WCAG: 4.1.2 Navn, rolle, verdi (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)

Test med tastatur

Sjekk at du kan

  • nå en checkbox med Tab
  • velge og fjerne valg med Mellomrom
  • nå alle checkboxer i en gruppe med Tab
  • navigere tilbake til en tidligere checkbox med Shift + Tab
Rediger denne siden på github.com (åpnes i ny fane)