Nouveau Components

Barre de progression

La barre de progression est un composant d’interface qui indique visuellement l’avancement d’une tâche en cours, comme le téléversement ou le téléchargement d’un fichier. Elle se présente généralement sous la forme d’une barre horizontale qui se remplit proportionnellement au taux d’avancement atteint. Lorsque l’avancement n’est pas mesurable, elle prend une forme indéterminée qui signale seulement que la tâche est en cours. Le composant n’est pas interactif : il ne reçoit pas le focus clavier et ne déclenche aucune action.

Sur cette page

Quand utiliser une barre de progression

  • Opération longue et mesurable : un téléversement, un export, un traitement dont on connaît l'avancement.
  • Progression dans un parcours : étape 3 sur 5 d'un formulaire en plusieurs pages.
  • Attente indéterminée : la variante sans valeur dit qu'il se passe quelque chose, sans promettre de durée.

Quand ne pas en utiliser

  • Opération instantanée : en deçà d'une seconde, la barre clignote sans rien apprendre.
  • Pour régler une valeur : une barre de progression se lit, elle ne se manipule pas. Pour choisir une valeur, utiliser un curseur.
  • Pour une note ou un ratio fixe : une jauge qui ne progresse pas n'est pas une progression ; un texte suffit souvent.

Modes d'action

  • Souris : aucun. La barre est un affichage, elle ne réagit pas au clic.
  • Clavier : aucun. Elle ne prend pas le focus et ne s'insère pas dans l'ordre de tabulation.
  • Lecteur d'écran : l'élément natif progress porte déjà le rôle et la valeur ; la progression chiffrée est annoncée par paliers dans une région live.

Contenu

  • Un label qui nomme l'opération : « Transfert du fichier rapport.pdf », et non « Chargement », surtout si la page en compte plusieurs.
  • Un pourcentage visible : la valeur chiffrée accompagne la barre, elle ne la remplace pas.
  • Une fin explicite : la réussite est dite en toutes lettres, la barre pleine ne suffit pas.

Sur cette page

Mots-clés

  • Barre de progression : affichage de l'avancement d'une opération, déterminée ou non.
  • progress : élément HTML natif qui porte déjà le rôle progressbar et la valeur courante.
  • Progression indéterminée : sans attribut value, la barre dit qu'il se passe quelque chose sans en chiffrer l'avancement.
  • Contrastes forcés : mode d'affichage où le système remplace les couleurs d'auteur par sa propre palette.

Décomposition des composants

La démonstration réunit les deux formes, déterminée et indéterminée.

La barre elle-même

  • L'élément progress apporte le rôle et la valeur : aucun attribut ARIA n'est ajouté, et il ne faut surtout pas en ajouter.
  • Sans attribut value, la barre est indéterminée. C'est la seule différence entre les deux formes.
  • Dès qu'on peint soi-même la piste et la partie remplie, le mode contrastes forcés a besoin d'une paire de couleurs système, sinon les deux retombent sur la même et la barre devient un rectangle uni (WCAG 1.4.11).

L'annonce de la progression

  • La valeur est annoncée par paliers de 25 % dans une région live. Annoncer chaque pourcentage saturerait la synthèse vocale (WCAG 4.1.3).
  • L'annonce nomme l'opération : sur une page qui compte deux barres, un pourcentage seul ne dit pas à quoi il se rapporte.
  • Le bouton de démarrage passe à aria-disabled pendant le traitement : il reste focalisable et dit qu'un transfert est déjà en cours, au lieu d'ignorer l'activation en silence.

Lecteur d'écran

  • La barre n'est pas focalisable : l'information passe par le label et par la région live.
  • Le label est associé à la barre par l'attribut for, comme pour un champ de formulaire.
  • La fin de l'opération est annoncée en toutes lettres, pas seulement par un dernier pourcentage.
  • La région live existe dès le chargement, et elle est vide.

La barre de progression est un composant non interactif : elle ne reçoit pas le focus clavier et n'est associée à aucune interaction clavier propre. Elle reste atteignable au curseur virtuel des lecteurs d'écran.

Interactions clavier du composant Barre de progression
Touche Fonction
Non applicable La barre de progression ne reçoit pas le focus et ne répond à aucune touche clavier. Elle est atteignable au curseur virtuel des lecteurs d'écran, et l'avancement est restitué par la région live associée, sans déplacement du focus.

Note : si la tâche peut être interrompue, le bouton d'annulation est un élément distinct de la barre de progression : il est atteignable à la touche Tab et activable par Entrée ou Espace. Consultez la page du composant Boutons pour ses interactions clavier.