Une barre de téléchargement avance de 0 à 100 % pendant qu'un fichier se transfère. Un formulaire d'inscription en trois étapes affiche une barre qui se remplit à mesure que l'utilisateur avance. Dans les deux cas, il s'agit d'une tâche en cours d'exécution, qui progresse mécaniquement vers un état final connu à l'avance. Ce n'est ni une mesure figée ni une simple animation décorative : c'est un statut qui évolue, et qui mérite d'être annoncé comme tel.
La balise <progress> représente exactement ce cas de figure : une tâche vers son achèvement, jamais une valeur statique.
Définition
<progress> indique l'état d'avancement d'une tâche vers son achèvement. Contrairement à <meter>, elle ne compare jamais une valeur à des seuils de qualité : elle se contente d'annoncer une fraction accomplie sur un total, et cette fraction n'a de sens que parce qu'elle grandit avec le temps ou avec les étapes franchies.
Le navigateur lui donne un rôle d'accessibilité dédié, annoncé aux lecteurs d'écran avec le pourcentage courant, sans qu'aucun attribut ARIA supplémentaire ne soit nécessaire.
Attributs value et max
Deux attributs suffisent à décrire la progression. Leur absence change radicalement le rendu et le sens de la balise.
| Attribut | Rôle |
|---|---|
value | La quantité déjà accomplie |
max | Le total à atteindre, 1 par défaut si absent |
Sans attribut min : contrairement à <meter>, <progress> commence toujours à zéro. Une tâche n'a pas de point de départ négociable, seulement un point d'arrivée.
Exemple concret
Voici une barre de progression pour un téléchargement de fichier, mise à jour par script à mesure que les octets arrivent.
<label for="dl">Téléchargement en cours</label>
<progress id="dl" value="70" max="100">70 %</progress>Le texte entre les balises, ici 70 %, ne s'affiche que dans les navigateurs incapables de rendre <progress>, mais reste utile à écrire pour ce cas de repli.
La barre indéterminée
Omettre entièrement l'attribut value transforme la barre en version indéterminée : une animation qui indique qu'une tâche est en cours sans pouvoir en chiffrer l'avancement. C'est le cas typique d'une recherche dont la durée est imprévisible, ou d'un traitement serveur dont on ne connaît pas encore la taille totale.
<progress>Chargement en cours</progress>Dès qu'une estimation devient disponible, ajouter value et max fait basculer la barre en mode déterminé. Beaucoup de sites démarrent en indéterminé le temps que la première mesure arrive, puis passent à une progression chiffrée.
Différence avec <meter>
La question à se poser est toujours la même : la valeur avance-t-elle vers un achèvement, ou décrit-elle un état mesuré ? Les étapes d'un tunnel de paiement, l'envoi d'un fichier ou l'installation d'une application avancent vers une fin : c'est <progress>. Un niveau de batterie ou un taux de remplissage sont des états, sans notion d'achèvement : c'est <meter>.
Un formulaire en plusieurs étapes est le terrain le plus fréquent de confusion. Certains développeurs y placent un <meter> parce que la barre reste visuellement identique à une jauge, alors que la sémantique correcte est bien <progress> : chaque étape rapproche l'utilisateur d'un achèvement, elle ne mesure pas un état stable.
Questions fréquentes
progress ?Oui, et <output> convient bien pour ce résultat calculé : la balise progress porte l'avancement, tandis qu'un output séparé, recalculé à chaque mise à jour, affiche l'estimation du temps restant en texte lisible.
Progress fonctionne-t-il sans JavaScript ?Le rendu visuel s'affiche sans aucun script, mais sa valeur reste figée à ce qui a été écrit dans le HTML au chargement de la page. Faire avancer réellement la barre pendant une tâche demande du script qui met à jour l'attribut value à intervalles réguliers ou à chaque événement pertinent.
progress pour une animation de chargement purement décorative ?Non, si aucune tâche réelle n'est en train de s'exécuter en arrière-plan, un simple élément décoratif marqué aria-hidden="true" suffit. Réserver <progress> aux cas où une progression réelle existe évite d'annoncer aux technologies d'assistance un statut qui ne correspond à rien de concret.