<progress> : l'élément d'indicateur de progression

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élémentHTML<progress> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.

Exemple interactif

<label for="file">Progression du fichier&nbsp;:</label><progress max="100" value="70">70%</progress>

label {  padding-right: 10px;  font-size: 1rem;}

Attributs

Cet élément inclut lesattributs universels.

max: Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attributmax est présent, sa valeur doit être un nombre décimal supérieur à0. La valeur par défaut est1.
value: Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre0 etmax (ou entre0 et1 si l'attributmax est absent). Si l'attributvalue est absent, la barre de progression traduit un état indéterminé ; cela indique qu'une activité est en cours sans indication de la durée prévue.

Note :Contrairement à l'élément<meter>, la valeur minimale est toujours 0 et l'attributmin n'est pas autorisé pour l'élément<progress>.

Note :La pseudo-classe CSS:indeterminate peut être utilisée pour cibler les barres de progression indéterminées. Pour qu'une barre de progression redevienne indéterminée après lui avoir donné une valeur, il faut retirer l'attributvalue avecelement.removeAttribute('value').

Accessibilité

Étiquetage

Dans la plupart des cas, vous devez fournir une étiquette accessible lors de l'utilisation de<progress>. Vous pouvez utiliser les attributs ARIA standards d'étiquetagearia-labelledby ouaria-label comme pour tout élément avecrole="progressbar", mais avec<progress>, vous pouvez aussi utiliser l'élément<label>.

Note :Le texte placé entre les balises de l'élément n'est pas une étiquette accessible, il est seulement recommandé comme solution de repli pour les anciens navigateurs qui ne prennent pas en charge cet élément.

Exemples

html

<label>  Téléversement du document&nbsp;:  <progress value="70" max="100">70 %</progress></label><!-- OU --><br /><label for="progress-bar">Téléversement du document</label><progress value="70" max="100">70 %</progress>

Résultat

Description d'une région particulière

Si l'élément<progress> décrit la progression du chargement d'une section d'une page, utilisezaria-describedby pour pointer vers l'état, et définissezaria-busy="true" sur la section qui est mise à jour, en supprimant l'attributaria-busy lorsqu'elle a fini de charger.

Exemples

html

<div aria-busy="true" aria-describedby="progress-bar">  <!-- le contenu de cette région est en cours de chargement --></div><!-- ... --><progress aria-label="Chargement du contenu…"></progress>

Résultat

Exemples

html

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

Résultat

Résumé technique

Catégories de contenu	Contenu de flux,contenu phrasé, contenu étiquetable,contenu tangible.
Contenu autorisé	Contenu phrasé sans élément`<progress>` parmi ses descendants.
Omission de balises	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés	Tout élément qui accepte ducontenu phrasé.
Rôle ARIA implicite	`progressbar`
Rôles ARIA autorisés	Aucun`role` autorisé
Interface DOM	`HTMLProgressElement`.