Button

Hvordan bruke komponenten 

Skill mellom primær- og sekundærhandlinger

Bruk primær-, sekundær- og tertiærknappene aktivt for vise brukeren hvilke funksjoner som er mer eller mindre sentrale.

Gjør slik:

Advarselknapp for handlinger det ikke går an å angre på

En advarselsknapp kan brukes for å understreke et alvor ved en handling, typisk at noe ikke kan reverseres. Du bør minimere risikoen for at knappen ikke trykkes på ved et uhell, for eksempel ved å plassere den i god avstand fra andre handlinger og sørge for at advarselknapp ikke har tastaturfokus fra start.

Gjør slik:

Unngå inaktive knapper

Inaktive knapper kan være utfordrende for brukere å oppfatte og forstå, og vi anbefaler at du unngår å bruke dem. I stedet bør knappen alltid være aktiv. Dersom skjemaet eller siden inneholder feil, slik at brukeren ikke kan navigere seg videre når knappen trykkes på, skal du vise fornuftige feilmeldinger ved siden av knappen. I interne løsninger kan det imidlertid være ok å bruke inaktive knapper for å øke effektiviteten.

Gjør slik:

Tekst i komponenten

• En knapp bør ha en kort og konsis beskrivelse av handlingen den utfører.
• Velg verb i oppfordringsform (imperativ) på knapper for å vise brukerne at de kan utføre en handling. Eksempler på oppfordringsform er «send», «signer», «endre».
• Unngå bare store bokstaver. Det gjør teksten vanskeligere å lese.
• Start knappeteksten med stor forbokstav.

Vær konsekvent

• Husk å bruke de samme begrepene på knappetekster som går igjen i tjenestene. Velg for eksempel om du skal skrive «Neste» eller «Videre».

Les mer om knappetekster i Skatteetatens skriveregler.

Universell utforming  

• Bruk korte, forståelige tekster i knappen. Det skal være lett å skjønne hva målet med knappen er. Se også skrivereglene for hvordan skrive på knapper.
• Ikke bruk knappen for å navigere videre til et annet område.
• Bruk aktiv knapp med feilmelding i stedet for inaktiv (disabled) knapp fordi:
  • inaktiv knapp har dårlig kontrast mot bakgrunn.
  • det kan være vanskelig for folk å vite om knappen kan trykkes på.
  • folk kan kan gå glipp av endring fra inaktiv til aktiv.
  • noen skjermlesere leser ikke elementer som er inaktive.
• Ikonet i button er skjult for skjermleser fordi det er regnes som pynt.