Hopp til hovedinnhold

Hva leter du etter?

Prøv å søke etter…

Komponenter

Button

Button lèt brukarane utføre handlingar.

Dette må du sjekke sjølv

Button-teksten skal tydeleg beskrive kva som skjer når brukaren aktiverer han.

Unngå generiske tekstar som «Klikk her».

WCAG: 2.4.4 Formål med lenkje i kontekst (uutilsynet)


Det tilgjengelege namnet skal samsvare med den synlege teksten.

Dersom du bruker aria-label eller andre teknikkar som overstyrer det tilgjengelege namnet, må det framleis samsvare med den synlege teksten.

WCAG: 2.5.3 Ledetekst i namn (uutilsynet)


Ikon i button med tekst skal vere dekorative og skjulast for skjermlesarar.

Ikonet skal ikkje lesast opp dersom teksten allereie beskriv handlinga.

WCAG: 1.1.1 Ikkje-tekstleg innhald (uutilsynet)


Ikon-knappar skal ha eit tilgjengeleg namn som beskriv handlinga.

Dette gjeld når button berre består av eit ikon.

WCAG: 4.1.2 Namn, rolle, verdi (uutilsynet)


Bruk av loader i button skal gi forståeleg tilbakemelding til skjermlesarbrukarar.

Dersom knappen viser ein lasteindikator, hugs å leggje til aria-busy="true" for å indikere at ei handling er i gang.

I tillegg må du vurdere korleis statusen blir kommunisert, til dømes ved å oppdatere teksten.

WCAG: 4.1.3 Statusmeldingar (uutilsynet)

Unngå å bruke deaktiverte knappar

Vi unngår å bruke deaktiverte (disabled) knappar fordi dei kan vere vanskelege å oppfatte. Nokre brukarar vil ikkje forstå kva knappen betyr, eller kvifor han ikkje er klikkbar. Ein aktiv knapp som viser ein feilmelding når brukaren klikkar, gjev i dei fleste tilfelle ein betre brukaroppleving. Nav har ei god forklaring på kvifor deaktiverte tilstandar er problematiske (nav.no) og kva alternativ som finst.

Dersom du likevel må bruke ein deaktivert knapp:

  • Sørg for at alle brukarane dine både merkar og forstår at knappen finst, at han er deaktivert, og kvifor.
  • Bruk gjerne støttetekst som alltid er synleg når knappen er deaktivert.
  • Dersom det er fornuftig at knappen framleis kan få fokus med tastatur,
    eller det av andre grunnar er viktig å bevare tab-rekkjefølgja, bruk aria-disabled i staden for disabled.
    Hugs då å sjølv hindre at callback-funksjonar (for eksempel onClick) blir køyrde.
Rediger denne siden på github.com (åpnes i ny fane)