ARIA : rôle meter

Le rôlemeter sert à identifier un élément utilisé comme indicateur de mesure.

Note :Lorsque cela est possible, il est recommandé d'utiliser l'élément natif<meter> plutôt que le rôlemeter, car les éléments natifs sont mieux pris en charge par les navigateurs et les technologies d'assistance.

Description

Un indicateur de mesure (meter en anglais) est une représentation graphique d'une valeur numérique dans une plage définie. Par exemple, l'affichage du pourcentage de batterie. Un indicateur de mesure n'est pas adapté aux valeurs qui n'ont pas de limite maximale significative. Il ne doit pas être utilisé pour indiquer une progression (exemple : chargement), cela doit être communiqué avec l'élément<progress>.

Chaque élément avecrole="meter" doit également comporter l'un des attributs suivants :

Un attributaria-label.
Un attributaria-labelledby pointant vers un élément contenant un texte qui décrit l'indicateur de mesure.

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

Certaines interfaces utilisateur, lorsqu'elles sont représentées dans une API d'accessibilité de plateforme, ne peuvent contenir que du texte. Les API d'accessibilité ne permettent pas de représenter des éléments sémantiques contenus dans unmeter. Pour pallier cette limitation, les navigateurs appliquent automatiquement le rôlepresentation à tous les éléments descendants d'un élémentmeter, car il s'agit d'un rôle qui ne prend pas en charge les enfants sémantiques.

Par exemple, considérez l'élémentmeter suivant, qui contient un titre :

html

<div role="meter"><h3>Titre de mon indicateur de mesure</h3></div>

Comme les descendants demeter sont des éléments de présentation, le code suivant est équivalent :

html

<div role="meter">  <h3 role="presentation">Titre de mon indicateur de mesure</h3></div>

Du point de vue de l'utilisateur·ice de technologies d'assistance, le titre n'existe pas puisque les extraits de code précédents sont équivalents à ce qui suit dansl'arbre d'accessibilité :

html

<div role="meter">Titre de mon indicateur de mesure</div>

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

aria-valuenow: Défini sur une valeur décimale comprise entrearia-valuemin etaria-valuemax indiquant la valeur actuelle de l'indicateur de mesure.
aria-valuetext: Les technologies d'assistance présentent souvent la valeur dearia-valuenow comme un pourcentage. Si cela n'est pas pertinent, utilisez cette propriété pour rendre la valeur compréhensible.
aria-valuemin: Défini sur une valeur décimale représentant la valeur minimale, et inférieure àaria-valuemax.
aria-valuemax: Défini sur une valeur décimale représentant la valeur maximale, et supérieure àaria-valuemin.

Il est recommandé d'utiliser l'élément natif<meter> plutôt que le rôlemeter. Les navigateurs proposent un widget stylisé pour l'élément<meter> en fonction de la valeur courante (value) par rapport aux valeursmin etmax. Si vous utilisez des éléments non sémantiques, toutes les fonctionnalités de l'élément natif doivent être recréées avec des attributs ARIA, du JavaScript et du CSS.

Exemples

Exemple d'indicateur de mesure utilisantrole="meter" :

html

<div  role="meter"  aria-valuenow="90"  aria-valuemin="0"  aria-valuemax="100"  aria-labelledby="cpu_usage_label">  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true">    <rect x="0" y="0" width="100%" height="100%" fill="currentColor"></rect>  </svg></div>

Dans ce scénario, lorsque la valeur dearia-valuenow est mise à jour, la largeur du SVG doit aussi être modifiée, comme illustré dansl'exemple fonctionnel du guide des bonnes pratiques ARIA (APG)^(angl.).