Progressbar

Retningslinjer for bruk

Bruk progressbar når

• du har to eller flere steg i en prosess
• brukeren må vite hvor langt de har kommet, og hva som gjenstår
• du ønsker å redusere usikkerhet eller frafall underveis

Unngå progressbar når

• prosessen er ett steg, da er den overflødig
• rekkefølgen i en prosess ikke er relevant
• du allerede bruker en annen fremdriftsindikator

Progressbar skal være tydelig

Det er ikke påkrevd å ha etikett eller tekst, men det bør være klart hva progressbaren representerer. Dersom prosessen består av flere steg, bør teksten forklare hvor i prosessen brukeren er.

Gjør slik

Bruk korte og konsise tekster

Unngå

Unngå lange eller uklare tekster

Universell utforming

Gi skjermleseren riktig informasjon

Skjermlesere må få vite hva progressbaren viser. Bruk riktig kombinasjon av aria-label, aria-labelledby eller aria-valuetext.

• Bruk aria-label hvis baren ikke har en synlig etikett
• Bruk aria-labelledby hvis etiketten står utenfor komponenten
• Bruk aria-valuetext hvis prosenttall alene ikke gir mening, for eksempel i stegvis fremdrift (“5 av 10”)

Hvis du bruker statusType="fraction", kan skjermleser lese “50 %”. Bruk aria-valuetext for å si “Spørsmål 5 av 10” hvis det gir mer mening.

Bruk riktig rolle

Progressbar har to ARIA-roller:

• progressbar: viser fremdrift i en prosess (standard)
• meter: viser en verdi innenfor et spenn (for eksempel temperatur eller poengsum)

Etiketten må være tydelig

En progressbar skal alltid ha en forklarende etikett, enten som tittel i komponenten, eller med aria-labelledby. Gjør det klart: Hva måles? Hva gjenstår?

Eksempler