Standarder · ARIA

Rolle Widget

progressbar

Markerer et element som en fremgangsviser. Brug <progress> først — det leverer semantikken, den determinate visualisering og value-attributterne native. Grib efter role="progressbar", når man skal styles ud over, hvad det native element tillader.

Hvornår bruges det

Brug <progress value="42" max="100">. Det native element er svært at style konsistent på tværs af browsere, hvilket er den primære årsag til at gribe efter role="progressbar" på en brugerdefineret <div> i stedet.

To varianter:

  • Determinate — man kender totalen. Sæt aria-valuemin, aria-valuemax, og opdatér aria-valuenow, efterhånden som arbejdet skrider frem.
  • Indeterminate — man kender ikke totalen. Udelad aria-valuenow (eller sæt det ikke). Skærmlæseren annoncerer “optaget” / “indlæser” uden en procentsats.

Sæt aria-valuetext, når det bare tal ikke er meningsfuldt — f.eks. læses aria-valuetext="Uploader foto 3 af 8" bedre end “37 procent”.

En progressbar er IKKE en live region — skærmlæsere annoncerer ikke alle aria-valuenow-ændringer. Hvis ændringen skal oplæses, brug også role="status" på et ledsagerelement med den menneskelæsbare fremgangstekst.

Hyppige fejl

  • role="progressbar" på en spinner uden aria-label. Rollen annonceres, men der er intet navn for opgaven.
  • Brug af role="progressbar" til en indeterminate spinner OG sætning af aria-valuenow="0". Det annoncerer “0 procent fuldført” for evigt.
  • Glemsel af at fjerne progressbaren (eller dens aria-busy), når arbejdet er færdigt. Nogle skærmlæsere fortsætter med at poll.
  • Parring af en progressbar med en visuelt skjult procentsats uden at opdatere begge dele, når overførslen stopper. Brugerne får en fastfrosset tilstand uden annoncering.
  • Placering af role="progressbar" på den omsluttende beholder OG på den indre fyldbar. Dobbelte roller; vælg én.

Eksempel

<!-- Foretrukket -->
<label for="upload">Uploader</label>
<progress id="upload" value="42" max="100">42%</progress>

<!-- Brugerdefineret determinate -->
<div id="uploadLabel">Uploader foto 3 af 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>