Le rôleprogressbar définit un élément qui affiche l'état de progression des tâches qui prennent du temps.

Description

Le widget de plageprogressbar indique qu'une demande a été reçue et que l'application progresse vers l'achèvement de l'action demandée.

Les auteur·ice·speuvent définiraria-valuemin etaria-valuemax pour indiquer les valeurs minimale et maximale de l'indicateur de progression. Sinon, leurs valeurs implicites suivent les mêmes règles que celles de l'élément HTML<input type="range"> :

• Siaria-valuemin est manquant ou n'est pas un nombre, il est par défaut à0 (zéro).
• Siaria-valuemax est manquant ou n'est pas un nombre, il est par défaut à100.
• Les propriétésaria-valuemin etaria-valuemax n'ont besoin d'être définies pour le rôleprogressbar que lorsque la valeur minimale de la barre de progression n'est pas0 ou que la valeur maximale n'est pas100.
• La propriété en lecture seulearia-valuenow doit être fournie et mise à jour, sauf si la valeur estindeterminate, auquel cas n'incluez pas l'attribut. Si elle est définie, assurez-vous que la valeur dearia-valuenow se situe entre les valeurs minimale et maximale.

Si le rôleprogressbar est appliqué à un élément HTML<progress>, le nom accessible peut provenir de la<label> associée. Sinon, utilisezaria-labelledby si une étiquette visible est présente ouaria-label si une étiquette visible n'est pas présente.

Tous les descendants sont des éléments de présentation

Il existe certains types de composants d'interface utilisateur qui, lorsqu'ils sont représentés dans une API d'accessibilité de plateforme, ne peuvent contenir que du texte. Les API d'accessibilité n'ont pas de moyen de représenter les éléments sémantiques contenus dans unprogressbar. Pour faire face à cette limitation, les navigateurs appliquent automatiquement le rôlepresentation à tous les éléments descendants de tout élémentprogressbar, car il s'agit d'un rôle qui ne prend pas en charge les enfants sémantiques.

Par exemple, considérons le suivant élémentprogressbar, qui contient un en-tête.

<div role="progressbar"><h3>Titre de ma barre de progression</h3></div>

Parce que les descendants deprogressbar sont des éléments de présentation, le code suivant est équivalent :

<div role="progressbar">  <h3 role="presentation">Titre de ma barre de progression</h3></div>

Du point de vue de l'utilisateur·ice de la technologie d'assistance, l'en-tête n'existe pas puisque les extraits de code précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :

<div role="progressbar">Titre de ma barre de progression</div>

Propriétés, états et rôles WAI-ARIA associés

aria-valuenow

Seulement présent et requis si la valeur n'est pas indéterminée. Défini sur une valeur décimale comprise entre0, ouaria-valuemin si présent, etaria-valuemax indiquant la valeur actuelle de la barre de progression.

aria-valuetext

Les technologies d'assistance présentent souvent la valeur dearia-valuenow sous forme de pourcentage. Si cela n'est pas précis, utilisez cette propriété pour rendre la valeur de la barre de progression compréhensible.

aria-valuemin

Défini sur une valeur décimale représentant la valeur minimale, et inférieure àaria-valuemax. Si non présent, la valeur par défaut est0.

aria-valuemax

Défini sur une valeur décimale représentant la valeur maximale, et supérieure àaria-valuemin. Si non présent, la valeur par défaut est100.

aria-label ouaria-labelledby

Définit la valeur de chaîne ou identifie l'élément (ou les éléments) qui étiquettent l'élément de la barre de progression fournissant un nom accessible. Un nom accessible est requis.

Il est recommandé d'utiliser un élément<progress> ou<input type="range"> natif plutôt que le rôleprogressbar. Les agents utilisateurs fournissent un widget stylisé pour l'élément<progress> basé sur la valeur actuelle par rapport à0, la valeur minimale et la valeurmax. Lors de l'utilisation d'éléments non sémantiques, toutes les fonctionnalités de l'élément sémantique natif doivent être recréées avec des attributs ARIA, JavaScript et CSS.

Exemples

Dans l'exemple ci-dessous, la barre de progression utilise les valeurs par défaut de 0 et 100 pouraria-valuemin etaria-valuemax :

<div>  <span>Chargement&nbsp;:</span>  <span role="progressbar" aria-labelledby="loadinglabel" aria-valuenow="23">    <svg width="100" height="10">      <rect height="10" width="100" stroke="black" fill="black" />      <rect height="10" width="23" fill="white" />    </svg>  </span></div>

En utilisant HTML sémantique, cela pourrait être écrit comme suit :

<label for="loadinglabel">Chargement&nbsp;:</label><progress max="100" value="23"></progress>

Bonnes pratiques

Si la barre de progression décrit la progression de chargement d'une région particulière d'une page, incluez l'attributaria-describedby pour référencer l'état de la barre de progression, et définissez l'attributaria-busy surtrue dans la région jusqu'à ce qu'elle soit complètement chargée.

Préférez HTML

Il est recommandé d'utiliser un élément<progress> ou<input type="range"> natif plutôt que le rôleprogressbar.

Spécifications

Voir aussi

• L'élément HTML<progress>
• D'autres widgets de plage incluent :
  • ARIA : rôlemeter
  • ARIA : rôlescrollbar
  • ARIA : rôleseparator (si sélectionnable)
  • ARIA : rôleslider
  • ARIA : rôlespinbutton