Button

BeskrivelseKodeUniversell utforming

Husk pÄ

  • Hold deg til korte, konsise tekster i knappene. Det skal vĂŠre enkelt for brukeren Ă„ forstĂ„ hva som skjer om de trykker pĂ„ knappen.
  • Dersom du bruker andre farger i knappene: dobbeltsjekk at du har god nok kontrast, minst 4.5:1 (bruk Stark plugin i Figma for Ă„ sjekke).
  • Ikke glem visuell feedback - bruk riktige hover, active og focus-states!
  • SĂ„ godt det lar seg gjĂžre: prioriter Ă„ bruke aktiv knapp med feilmelding i stedet for “disabled”-variant av knappen.
  • SĂžrg for at knappen er forstĂ„elig for de som bruker skjermleser, dette er spesielt viktig om du bruker knapp med bare ikon. I tilfeller hvor ikonet er meningsbĂŠrende, for eksempel en knapp med et e-post-ikon og teksten “send”, sĂ„ kan skjermleseren bare lese “button, send”. I disse tilfellene bĂžr du bruke aria-label eller vĂ„r CSS-klasse “pkt-sr-only” for Ă„ skjule beskrivelsen av knappen visuelt, men den leses opp av skjermleseren.
  • Hvis du bruker animasjon for Ă„ gi tilbakemelding pĂ„ knappens tilstand, bĂžr du sĂžrge for at det er mulig Ă„ slĂ„ av eller dempe animasjonen.
Sjekkliste

Les mer