Cet article nécessite une relecture technique. Voici comment vous pouvez aider.
Description
Cette technique présente l’utilisation du rôle progressbar
.
Le rôle progressbar
devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.
Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs aria-valuenow
, aria-valuemin
et aria-valuemax
. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow
.
Lorsqu’une tâche progresse, la valeur aria-valuenow
doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.
Si le rôle progressbar
décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby
pour pointer vers l’état courant, et définir l’attribut aria-busy
à true
pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar
car elle est toujours en lecture seule.
aria-valuenow
sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin
et aria-valuemax
, sauf si aria-valuetext
est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin
, aria-valuemax
et aria-valuenow
de façon appropriée pour ce calcul.progressbar
ont une valeur aria-readonly
implicite définie à true
.Effets possibles sur les agents utilisateurs et les technologies d’assistance
Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.
Exemples
Exemple 1 : barre de progression simple avec pourcentage de progression
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
Exemple 2 : Utilisation de aria-valuetext
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> Étape 2 : Copie des fichiers… </div>
Exemples concrets :
Notes
Attributs ARIA utilisés
Techniques ARIA connexes
Compatibilité
À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.