Attributen
Dit element bevat de globale attributen.
max | Dit attribuut beschrijft hoeveel werk de taak die door het progress-element wordt aangeduid, vereist. Het max-attribuut moet, indien aanwezig, een waarde groter dan 0 hebben en een geldig drijvendekommagetal zijn. De standaardwaarde is 1. |
|---|---|
value | Dit attribuut geeft aan hoeveel van de taak is voltooid. Het moet een geldig drijvendekommagetal zijn tussen 0 en max, of tussen 0 en 1 als max is weggelaten. Als er geen value-attribuut is, is de voortgangsbalk onbepaald; dit geeft aan dat er een activiteit gaande is zonder aanduiding van hoe lang deze naar verwachting zal duren. |
In tegenstelling tot het <meter>-element is de minimumwaarde altijd 0, en is het min-attribuut niet toegestaan voor het <progress>-element.
De pseudoklasse :indeterminate kan worden gebruikt om overeen te komen met onbepaalde voortgangsbalken. Om de voortgangsbalk na het geven van een waarde weer onbepaald te maken, moet u het value-attribuut verwijderen met element.removeAttribute('value').
Toegankelijkheid
Labelen
In de meeste gevallen moet u een toegankelijk label opgeven bij het gebruik van <progress>. Hoewel u de standaard ARIA-labelattributen aria-labelledby of aria-label kunt gebruiken, zoals u zou doen bij elk element met role="progressbar", kunt u bij gebruik van <progress> in plaats daarvan ook het <label>-element gebruiken.
Tekst die tussen de tags van het element wordt geplaatst, is geen toegankelijk label; dit wordt alleen aanbevolen als terugvaloptie voor oude browsers die dit element niet ondersteunen.
Voorbeelden
<label>
Uploading Document: <progress value="70" max="100">70 %</progress>
</label>
<!-- OR -->
<br />
<label for="progress-bar">Uploading Document</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>Resultaat
Een bepaald gebied beschrijven
Als het <progress>-element de laadvoortgang van een sectie van een pagina beschrijft, gebruik dan aria-describedby om naar de status te verwijzen, en stel aria-busy="true" in op de sectie die wordt bijgewerkt, waarbij u het aria-busy-attribuut verwijdert zodra het laden is voltooid.
Voorbeelden
<div aria-busy="true" aria-describedby="progress-bar">
<!-- content is for this region is loading -->
</div>
<!-- ... -->
<progress id="progress-bar" aria-label="Content loading…"></progress>Resultaat
Voorbeelden
<progress value="70" max="100">70 %</progress>Resultaat
Technische samenvatting
| Contentcategorieën | Flow content, phrasing content, labelable content, palpable content. |
|---|---|
| Toegestane inhoud |
Phrasing content, maar er mag geen <progress>-element onder de afstammelingen ervan voorkomen.
|
| Weglaten van tags | Geen, zowel de begin- als eindtag zijn verplicht. |
| Toegestane bovenliggende elementen | Elk element dat phrasing content accepteert. |
| Impliciete ARIA-rol | progressbar |
| Toegestane ARIA-rollen | Geen role toegestaan |
| DOM-interface | HTMLProgressElement |