Choisissez un emplacement clair : en haut d’un modal d’upload, sous le bouton de sélection de fichier, ou en overlay global si l’upload bloque l’interface. Privilégiez un emplacement cohérent sur toutes les pages où l’on peut uploader.

Préparez : 1) un conteneur visible pour la barre, 2) une zone texte pour le pourcentage et les tailles (ex. “42 % — 1.2 / 3.0 Mo”), 3) un bouton Annuler et 4) un petit message d’état (upload en cours / réussi / erreur).

La barre doit être cachée par défaut. Au lancement de l’upload, affichez-la, initialisez la valeur à 0 % et placez le focus (optionnel) sur le bouton d’annulation si l’action est longue.

À succès : afficher brièvement un état “Terminé” (ex. 100 % + coche), puis masquer automatiquement après un délai court (500–1500 ms) ou laisser l’utilisateur fermer la notification. En cas d’erreur ou d’annulation, afficher message et proposer retry.

Au démarrage, démarrez l’envoi et abonnez la barre aux événements de progression fournis par le mécanisme d’envoi (événements fréquents : mettez en place un throttling/taux minimal de rafraîchissement pour éviter un rendu excessif).

Si la taille totale est connue : pourcentage = (octets envoyés / octets totaux) × 100. Affichez aussi les tailles (envoyées / totales) arrondies à 1 ou 2 décimales pour lisibilité.

Ne mettez pas l’UI à jour à chaque événement si ceux-ci sont très fréquents. Exemple de stratégie : mettre à jour au max 10 fois par seconde, ou uniquement si la progression a changé d’au moins 1 %.

Quand la taille totale n’est pas fournie, affichez un indicateur indéterminé (animation en boucle) ou appliquez une progression estimée : démarrer par une animation rapide vers 25–40 %, puis ralentir et ajuster quand vous recevez la vraie progression ou la confirmation de fin.

Quand l’opération signale la fin, forcez la barre à 100 %, affichez l’état de réussite, puis déclenchez le callback de fin (masquage, refresh de la liste, notification). Assurez-vous que le callback est exécuté une seule fois même si plusieurs événements “fin” arrivent.

Ajoutez un bouton Annuler visible pendant l’upload. Il doit : 1) stopper l’envoi, 2) remettre la barre à l’état caché ou “Annulé”, 3) rétablir l’UI (réactiver boutons, réinitialiser form).

Sur erreur réseau ou serveur, remplacez l’état de la barre par “Erreur” et affichez un message explicite (ex. “Échec : connexion perdue”). Proposez un bouton Réessayer et affichez un log simplifié (nom du fichier, taille).

Après annulation/erreur, supprimez tout état temporaire (fichiers en cours) et réinitialisez la barre. Évitez de conserver valeurs partielles visibles.

Proposez un retry manuel. Si vous offrez des retries automatiques, appliquez un backoff exponentiel court et limitez le nombre de tentatives pour éviter de saturer la connexion.

Informez l’utilisateur de l’action recommandée : “Réessayez”, “Vérifiez la connexion”, ou “Contactez le support”. Utilisez toasts ou message inline selon le contexte.

Assignez role=“progressbar” au conteneur visible et renseignez aria-valuemin=“0”, aria-valuemax=“100” et aria-valuenow=“[valeur actuelle]”. Ajoutez aria-label ou aria-labelledby pour décrire l’objet, par ex. “Envoi de la pièce jointe”.

Ajoutez une région aria-live=“polite” (ou “assertive” pour erreurs critiques) qui annonce la fin, l’erreur ou l’annulation. Exemple : “Upload terminé”, “Échec de l’envoi”.

Pour les utilisateurs ayant réduit le mouvement, remplacez animations complexes par changements instantanés ou transitions très rapides. Vérifiez la préférence via CSS média query dédiée et ajustez les animations.

Assurez un contraste élevé entre la barre remplie et le fond (ratio recommandé ≥ 4.5:1 pour texte). Ne vous fiez pas uniquement à la couleur : ajoutez une icône ou un label textuel.

Permettez au bouton Annuler d’être accessible au clavier, et faites en sorte que la barre puisse être lue par tabulation si utile (ex. focus sur la région live après fin).