<progress>: l'elemento "indicatore di avanzamento"

L'elemento HTML <progress> visualizza un indicatore che mostra lo stato di avanzamento del completamento di un'attività, generalmente visualizzato come una barra di avanzamento.

Attributi

max

Questo attributo descrive quanto lavoro richiede l'attività indicata dall'elemento <progress>. L' attributo max, se presente, deve avere un valore maggiore di 0 ed essere un numero a virgola mobile valido. Il valore predefinito è 1.

value

Questo attributo specifica la quantità di attività che è stata completata. Deve essere un numero a virgola mobile valido tra 0 e max, o tra 0 e 1 se max viene omesso. Se non è presente alcun attributo value, la barra di avanzamento è indeterminata; questo indica che un'attività è in corso senza alcuna indicazione del tempo previsto.

Nota: a differenza dell'elemento <meter>, il valore minimo è sempre 0 e l'attributo min non è consentito per l'elemento <progress>.

Nota: la pseudo-classe :indeterminate può essere utilizzata per confrontare barre di avanzamento indeterminate. Per modificare la barra di avanzamento in modo indeterminato dopo averle assegnato un valore, è necessario rimuovere l'attributo value con element.removeAttribute('value').

Esempio

<progress value="70" max="100">70% </progress>

Problemi di accessibilità

Etichettatura

Nella maggior parte dei casi è necessario fornire un'etichetta accessibile quando si utilizza <progress>. Mentre puoi usare gli attributi di etichettatura ARIA standard aria-labelledby o aria-label come faresti per qualsiasi elemento con role="progressbar", quando usi <progress> puoi in alternativa usare l'elemento <label>.

Nota: il testo posizionato tra i tag dell'elemento non è un'etichetta accessibile, è consigliato solo come ripiego per i vecchi browser che non supportano questo elemento.

Esempio

<label>Caricamento del documento: <progress value="70" max="100">70%
</progress></label>

Descrivere una regione particolare

Se l'elemento <progress> descrive l'avanzamento del caricamento di una sezione di una pagina, utilizzare aria-describedby per puntare allo stato e impostare aria-busy="true" sulla sezione che si sta aggiornando, rimuovendo l'attributo aria-busy al termine del caricamento.

Esempio

<div aria-busy="true" aria-describedby="progress-bar">
  <!-- Contenuto in caricamento -->
</div>