Button

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.

Loading og aria-disabled deaktiverer ikkje onClick

Merk: Verken loading="true" eller aria-disabled="true" hindrar automatisk at knappen utløyser onClick. Desse attributta påverkar berre utsjånad og tilgjengelegheit, ikkje funksjonaliteten.

Dersom knappen ikkje skal kunne utføre handlingar når han lastar eller er deaktivert, må du sjølv legge inn logikk som hindrar at callback-funksjonen blir køyrd. Til dømes:

Rediger denne siden på github.com (åpnes i ny fane)