Progress bar (Barre de progression)

La barre de progression est une barre qui indique visuellement l’avancement d’un média pendant sa lecture (audio comme un podcast ou la vocalisation d’un article, vidéo, page de texte proportionnellement au scroll…). Il existe 2 types de barres de progression : une barre passive, purement indicative et une barre interactive permettant de modifier la position de lecture.

Usage

• La barre de progression doit être utilisée pour des activités courtes : entre 2 et 5 secondes.
• Sa vitesse d’avancement est proportionnelle à la durée du média.
• L’animation commence, se met en pause et se termine en même temps que la lecture.
• La barre interactive se différencie de la version visuelle par un marqueur invitant à la saisie.
• La barre passive sert essentiellement à indiquer le niveau d’avancement d’un média en direct au moment de la consultation.

Bonnes pratiques

• Il y a une barre par média.
• Ne pas utiliser une barre interactive quand l’interaction n’est pas possible et vice-versa.

Style & code

Version passive

Cette version utilise la balise d’HTML sémantique <progress> qui sert explicitement à cet usage : indiquer le niveau de progression d’une tâche. Cette balise nécessite au minimum 2 attributs : max et value (il existe aussi l’attribut min, mais celui-ci est facultatif s’il est égal à 0). Cet élément doit par ailleurs porter la classe su-progress-bar afin de lui donner l’aspect attendu.

Pour l’aria-valuetext, cf. l’accessibilité ci-dessous.

<progress class="su-progress-bar su-margin-bottom-m" max="100" value="0" aria-valuetext="Le média est diffusé à 0%"></progress>
<progress class="su-progress-bar su-margin-bottom-m" max="100" value="25" aria-valuetext="Le média est diffusé à 25%"></progress>
<progress class="su-progress-bar su-margin-bottom-m" max="100" value="50" aria-valuetext="Le média est diffusé à 50%"></progress>
<progress class="su-progress-bar su-margin-bottom-m" max="100" value="75" aria-valuetext="Le média est diffusé à 75%"></progress>
<progress class="su-progress-bar" max="100" value="100" aria-valuetext="Le média est diffusé à 100%"></progress>

Version interactive

La version interactive nécessite un élément de contrôle. On utilisera pour cela l’input type="range", auquel on ajoute la classe su-progress-bar.

Là aussi on ajoute des attributs d’accessibilité (role, aria-valuenow…).

<input type="range" max="445" value="332" class="su-progress-bar" role="progressbar" aria-valuenow="332" aria-valuemin="0" aria-valuemax="445" aria-valuetext="Votre média est avancé de 5min 32s" />

Accessibilité

Ces 2 types de barres de progression ne sont pas égales face à l’accessibilité. La 1^re s’appuyant sur la balise HTML sémantique <progress> est déjà accessible en elle-même. Un navigateur saura expliquer qu’il s’agit d’une barre de progression et donner l'échelle de cette progression grâce aux attributs max et value. Pour une meilleure accessibilité, on peut donner un peu plus de d’information et de contexte avec l’attribut ARIA aria-valuetext avec une phrase explicite du type « "Le média" est diffusé à 75% » en changeant dynamiquement la valeur de l’avancement.

Pour la barre de progression interactive qui détourne un élément HTML, il faut lui attribuer un role aria de type progressbar, ajouter les attributs nécessaires à la compréhension : aria-valuenow, aria-valuemin, aria-valuemax et optionnellement là aussi aria-valuetext.

Pour en savoir plus, vous pouvez consulter la page dédiée au rôle progressbar sur MDN.