Rol Widget

`progressbar`

Markeert een element als voortgangsindicator. Gebruik eerst <progress> — dat levert de semantiek, de deterministische weergave en de waardeattributen native. Gebruik role="progressbar" alleen wanneer het native element onvoldoende stijlmogelijkheden biedt.

Wanneer te gebruiken

Gebruik <progress value="42" max="100">. Het native element is moeilijk consistent te stijlen in browsers, wat de voornaamste reden is om role="progressbar" op een aangepaste <div> te gebruiken.

Twee varianten:

Deterministisch — het totaal is bekend. Stel aria-valuemin, aria-valuemax in en update aria-valuenow naarmate de voortgang vordert.
Indeterministisch — het totaal is niet bekend. Laat aria-valuenow weg (of stel het niet in). De schermlezer kondigt “bezig” / “laden” aan zonder percentage.

Stel aria-valuetext in wanneer het kale getal niet betekenisvol is — bijvoorbeeld aria-valuetext="Foto 3 van 8 uploaden" klinkt beter dan “37 procent”.

Een progressbar is GEEN live regio — schermlezers kondigen niet elke wijziging van aria-valuenow aan. Als de wijziging uitgesproken moet worden, gebruik dan ook role="status" op een bijbehorend element met de voor mensen leesbare voortgangstekst.

Veelvoorkomende fouten

role="progressbar" op een spinner zonder aria-label. De rol wordt aangekondigd maar er is geen naam voor de taak.
role="progressbar" gebruiken voor een indeterministische spinner EN aria-valuenow="0" instellen. Dat kondigt eeuwig “0 procent voltooid” aan.
Vergeten de progressbar (of zijn aria-busy) te verwijderen wanneer het werk voltooid is. Sommige schermlezers blijven polling uitvoeren.
Een progressbar combineren met een visueel verborgen percentage maar geen van beide bijwerken wanneer de upload stagneert. Gebruikers krijgen een vastgelopen toestand zonder aankondiging.
role="progressbar" plaatsen op de omhullende container EN op de binnenste vulbalk. Dubbele rollen; kies er één.

Voorbeeld

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

<!-- Aangepaste deterministische variant -->
<div id="uploadLabel">Uploading photo 3 of 8</div>
<div
  role="progressbar"
  aria-labelledby="uploadLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="37"
></div>