Barre de chargement
Indicateur visuel et sémantique informant l'utilisateur de l'état d'avancement d'une tâche technique.
1. Démonstration
2. Accessibilité (La puissance du HTML natif)
Utiliser la balise native <progress> nous dispense de créer des balises complexes avec des rôles et attributs ARIA manuels (role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax).
| Concept | Explication |
|---|---|
Balise <progress> |
Le navigateur indique automatiquement aux lecteurs d'écran qu'il s'agit d'une barre de progression. |
Étiquetage (<label>) |
Comme pour un champ de formulaire, il est crucial d'associer un <label> à l'ID de la barre pour vocaliser la nature du chargement. |
| Valeur de repli (Fallback) | Le texte placé à l'intérieur de la balise (ex: 45 %) ne s'affiche que sur les (très) vieux navigateurs qui ne supportent pas la balise, garantissant une robustesse à toute épreuve. |
| Indéterminé vs Déterminé | L'absence de l'attribut value transforme nativement la barre en un indicateur de chargement infini (type « spinner »). |
3. Code source HTML
Le code sémantique minimal pour intégrer ces barres.
Note : En conditions réelles, c'est le seul endroit où vous aurez besoin de JavaScript, uniquement pour mettre à jour l'attribut value au fur et à mesure de votre tâche.
<label for="loading-data">Téléchargement en cours...</label>
<progress id="loading-data" value="75" max="100">75 %</progress>
<label for="waiting-server">Connexion au serveur...</label>
<progress id="waiting-server" max="100">Veuillez patienter</progress>
4. Composants dynamiques : L'indispensable aria-busy
Si votre barre de chargement indique qu'une zone de la page est en train de se mettre à jour (ex: filtrage de résultats de recherche, carte interactive), la balise <progress> seule ne suffit pas. Il faut gérer l'état du conteneur cible.
Utilisez l'attribut aria-busy sur la zone de contenu qui est en train de changer :
aria-busy="true": Demande aux lecteurs d'écran de patienter et de ne pas lire le contenu pendant qu'il se met à jour de façon incomplète.aria-busy="false": Signale que le chargement est terminé. Combiné à un aria-live, le lecteur d'écran annoncera alors les nouveaux résultats de façon fluide.
<label for="loading-results" class="sr-only">Mise à jour de la carte...</label>
<progress id="loading-results" max="100">Chargement...</progress>
<div id="resultats-carte" aria-busy="true" aria-live="polite"></div>
5. L'alternative circulaire (Spinner)
Pour les interfaces denses (ex: chargement à l'intérieur d'un bouton ou sur une petite carte), la barre horizontale prend trop de place. On lui préfère un indicateur circulaire (spinner).
Comme il n'existe pas de balise HTML native pour un spinner, nous utilisons un élément SVG avec role="status" et un texte masqué visuellement pour l'accessibilité.
<div class="spinner-container">
<svg class="spinner" viewBox="0 0 50 50" aria-hidden="true">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
<span class="sr-only">Chargement en cours...</span>
</div>
6. Alternatives et bonnes pratiques de design
Chargement initial vs. Skeleton Screens
Pour un chargement de page global ou l'affichage initial de blocs de contenu, les barres de progression ou les spinners traditionnels peuvent donner une impression de lenteur.
Préférez les Skeleton Screens (écrans squelettes) : des blocs gris qui miment la structure finale. L'œil commence déjà à lire l'agencement, ce qui réduit considérablement le temps d'attente perçu.
Note de performance : Si un temps de réponse serveur est inférieur à 500ms, n'affichez aucun indicateur visuel pour éviter un effet de « flash » désagréable.
Chargement vs. Barre de processus (Étapes)
Ne confondez pas la balise <progress> (temps technique) avec une barre d'étapes de formulaire (avancement cognitif ou métier).
Pour un tunnel de commande (ex: Panier, Livraison, Paiement), n'utilisez pas <progress>.
Préférez une liste sémantique (<ol>, <li>) couplée à l'attribut aria-current="step" pour l'étape active.