Button

Dette må du sjekke selv

Button-tekst skal tydelig beskrive hva som skjer når brukeren aktiverer den.

Unngå generiske tekster som “Klikk her”.

WCAG: 2.4.4 Formål med lenke (i kontekst)

---

Det tilgjengelige navnet skal samsvare med synlig tekst.

Hvis du bruker aria-label eller andre teknikker som overstyrer det tilgjengelige navnet, må det fortsatt samsvare med den synlige teksten.

WCAG: 2.5.3 Ledetekst i navn

---

Ikon i button med tekst skal være dekorativt og skjules for skjermlesere.

Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen.

WCAG: 1.1.1 Ikke-tekstlig innhold

---

Ikon-knapper skal ha et tilgjengelig navn som beskriver handlingen.

Dette gjelder når button kun består av et ikon.

WCAG: 4.1.2 Navn, rolle, verdi

---

Bruk av loader i button skal gi forståelig tilbakemelding til skjermleserbrukere.

Hvis knappen viser en lasteindikator, huske å legg på aria-busy="true" for å indikere at en handling pågår.

I tillegg må du vurdere hvordan status kommuniseres, for eksempel ved å oppdatere teksten.

WCAG: 4.1.3 Statusbeskjeder

---

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)