ARIA : rôle progressbar

Description

Le widget de plage progressbar 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·s peuvent définir aria-valuemin et aria-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"> :

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

Si le rôle progressbar est appliqué à un élément HTML <progress>, le nom accessible peut provenir de la <label> associée. Sinon, utilisez aria-labelledby si une étiquette visible est présente ou aria-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 un progressbar. Pour faire face à cette limitation, les navigateurs appliquent automatiquement le rôle presentation à tous les éléments descendants de tout élément progressbar, 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ément progressbar, qui contient un en-tête.

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

Parce que les descendants de progressbar 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 entre 0, ou aria-valuemin si présent, et aria-valuemax indiquant la valeur actuelle de la barre de progression.

aria-valuetext

Les technologies d'assistance présentent souvent la valeur de aria-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 est 0.

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 est 100.

aria-label ou aria-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ôle progressbar. 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 valeur max. 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 pour aria-valuemin et aria-valuemax :

<div>
  <span id="loadinglabel">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 id="loadinglabel" 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'attribut aria-describedby pour référencer l'état de la barre de progression, et définissez l'attribut aria-busy sur true 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ôle progressbar.

Spécifications

Voir aussi

• L'élément HTML <progress>
• D'autres widgets de plage incluent :
  • ARIA : rôle meter
  • ARIA : rôle scrollbar
  • ARIA : rôle separator (si sélectionnable)
  • ARIA : rôle slider
  • ARIA : rôle spinbutton