Jauge accessible (meter) : critères RGAA et role meter

Une jauge (meter) représente graphiquement une valeur mesurée dans un intervalle connu : espace disque utilisé, score d'accessibilité, niveau de batterie. HTML fournit deux éléments natifs voisins et non interchangeables : <meter> pour une mesure, <progress> pour l'avancement d'une tâche. Choisir le bon est la première décision d'accessibilité de ce motif, car les lecteurs d'écran ne les annoncent pas de la même façon.

La règle qui compte le plus ici tient en une phrase : la valeur d'une jauge doit toujours exister aussi en texte visible. Tout le reste de cette fiche en découle.

Quand ce motif est le mauvais choix

• Pour la progression d'une tâche (téléversement, installation), utiliser <progress>, jamais <meter>. Inversement, l'espace disque utilisé ne « progresse » vers rien : c'est <meter>. Les utilisateurs de lecteur d'écran s'appuient sur cette distinction annoncée.
• Si l'utilisateur peut modifier la valeur, ce n'est pas une jauge mais un curseur (slider) : un motif entièrement différent, focusable et pilotable au clavier.
• Attention au piège de <progress> sans attribut value : il devient indéterminé, l'équivalent d'un spinner annonçant « occupé », même si la valeur est connue par ailleurs. L'omettre par accident (valeur arrivée en retard d'une requête, par exemple) est un vrai bug.

Critères RGAA applicables

• Critère 3.1 : information donnée par la couleur. Une jauge qui ne signale son état que par sa couleur (vert / orange / rouge) donne l'information uniquement par la couleur ; il faut un texte porteur du même sens (test 3.1.4 pour une couleur portée par CSS).
• Critère 3.2 : contraste du texte. La valeur textuelle affichée doit respecter le rapport de contraste avec son arrière-plan (4,5:1 pour un texte courant).
• Critère 3.3 : contraste des éléments graphiques porteurs d'information. Les couleurs de la barre doivent atteindre 3:1 avec l'arrière-plan contigu. En pratique, un texte visible donnant la même information constitue une alternative qui rend la barre non concernée par ce critère (cas particulier du critère 3.3) : raison de plus pour toujours afficher la valeur en texte.
• Critère 7.1 : scripts compatibles avec les technologies d'assistance. La valeur de la jauge doit être restituée. La prise en charge de role="meter" par les lecteurs d'écran est historiquement inégale : la valeur en texte visible n'est donc pas optionnelle, c'est elle qui garantit la restitution pour tous.

Interaction clavier attendue

Aucune. Une jauge n'est pas interactive : elle ne reçoit jamais le focus et ne doit pas porter de tabindex.

Un arrêt de tabulation qui ne fait rien est du bruit pour la personne qui navigue au clavier. Si la valeur est modifiable, le motif n'est pas une jauge mais un curseur.

Rôles et attributs ARIA

L'élément natif <meter> dérive son rôle et sa valeur de ses attributs value, min et max : ne pas y redéclarer aria-valuenow, qui créerait une seconde source de vérité. Une jauge construite en <div> (uniquement si <meter> ne peut vraiment pas être stylé au design) doit porter role="meter", aria-valuenow, aria-valuemin, aria-valuemax, un nom accessible et, quand le nombre brut ne suffit pas, aria-valuetext.

<!-- Mesure dans un intervalle connu : l'étiquette est associée
     et la valeur existe en TEXTE. L'élément est le visuel,
     le texte est l'information. -->
<div>
  <label for="disque">Espace disque</label>
  <meter id="disque" min="0" max="100" low="60" high="85" optimum="0"
         value="72">72 %</meter>
  <span>72 % de 500 Go utilisés</span>
</div>

<!-- Avancement d'une tâche : <progress>, pas <meter>. -->
<div>
  <label for="envoi">Envoi de rapport.pdf</label>
  <progress id="envoi" max="100" value="43">43 %</progress>
  <span>43 % effectués</span>
</div>

<!-- Version personnalisée, uniquement si <meter> ne peut pas être stylé.
     Chaque attribut que l'élément natif fournissait est maintenant dû. -->
<span id="score-label">Score d'accessibilité</span>
<div role="meter" aria-labelledby="score-label"
     aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"
     aria-valuetext="87 sur 100, bon niveau">
  <div class="jauge-remplissage" style="inline-size: 87%"></div>
</div>
<span>87 / 100 : bon niveau</span>

Côté styles, les entrailles de <meter> se personnalisent par des pseudo-éléments propriétaires, à la prise en charge variable : c'est la raison légitime de passer par des <div> quand le design l'exige, à condition de conserver la valeur en texte.

/* Pseudo-éléments propriétaires de <meter> (prise en charge variable). */
meter::-webkit-meter-optimum-value { background: #1a7f37; }
meter::-webkit-meter-suboptimum-value { background: #9a6700; }
meter::-webkit-meter-even-less-good-value { background: #b3261e; }

/* En mode contrastes forcés (Windows), les arrière-plans CSS
   disparaissent : la valeur textuelle est ce qui survit. */
@media (forced-colors: active) {
  .jauge-remplissage { forced-color-adjust: none; background: Highlight; }
}

Et les contre-exemples qui concentrent l'essentiel des non-conformités du motif :

<!-- À NE PAS FAIRE : jauge sans valeur textuelle.
     L'information n'existe que comme longueur de barre colorée. -->
<meter min="0" max="100" value="72"></meter>

<!-- À NE PAS FAIRE : <meter> pour une progression de tâche.
     La sémantique annoncée est fausse : une mesure n'avance vers rien. -->
<meter min="0" max="100" value="43">Téléversement</meter>

<!-- À NE PAS FAIRE : compter sur le texte de repli comme nom accessible.
     Il n'est affiché QUE par les navigateurs qui ne connaissent pas
     <meter>. Cette jauge est en réalité sans nom. -->
<meter min="0" max="100" value="72">Espace disque : 72 %</meter>

<!-- À NE PAS FAIRE : oublier value sur un <progress> déterminé.
     Sans value, la barre devient indéterminée et annonce « occupé »,
     même si la progression est connue. -->
<progress max="100"></progress>

Deux subtilités à retenir de ces exemples :

• Le texte placé entre <meter> et </meter> est un contenu de repli pour les navigateurs qui ne connaissent pas l'élément. Il n'est ni un nom accessible, ni annoncé par les navigateurs modernes : d'où le <span> visible séparé.
• En mode contrastes forcés (Windows), les arrière-plans CSS de la barre disparaissent. La valeur textuelle est ce qui survit et continue de porter l'information.

Défauts fréquents et impact utilisateur

• Jauge sans valeur textuelle : l'information n'existe que comme longueur de barre colorée. Avec la prise en charge inégale de role="meter", une partie des utilisateurs de lecteur d'écran n'obtient rien du tout, et en contrastes forcés la barre disparaît (critères 7.1 et 3.1).
• Couleur comme seul signal d'état : rouge contre vert est tout le message, invisible pour une personne qui ne distingue pas ces couleurs (critère 3.1).
• <meter> pour une progression de tâche, ou <progress> pour une mesure statique : la sémantique annoncée est fausse ; l'utilisateur entend une tâche en cours là où rien n'avance, ou l'inverse.
• Compter sur le texte de repli comme nom accessible : « Espace disque : 72 % » entre les balises n'est jamais annoncé par un navigateur qui prend en charge <meter> ; la jauge est en réalité sans nom.
• role="meter" sans aria-valuenow : le rôle promet une valeur absente ; la jauge est annoncée vide (critère 7.1).
• tabindex sur la jauge : un arrêt de tabulation inutile qui ralentit la navigation au clavier sans rien offrir.

Ce que les outils automatiques ne détectent pas

• La confusion <meter> / <progress> : les deux éléments sont syntaxiquement valides, seul le sens du contenu dit lequel est juste.
• Une jauge dont l'information n'existe qu'en couleur ou en longueur de barre, sans valeur textuelle équivalente : juger l'équivalence de l'information reste une vérification humaine.
• La disparition de l'information en mode contrastes forcés, quand les arrière-plans CSS sont supprimés.

Les outils automatiques, dont notre scanner, repèrent en revanche une jauge sans nom accessible et un role="meter" sans aria-valuenow : utile en première passe, insuffisant pour conclure.

Vérifier ce composant

Protocole manuel, rapide sur ce motif non interactif :

1. Le test de la valeur textuelle, le plus important : passer la page en niveaux de gris, ou supprimer mentalement la barre. La valeur reste-t-elle lisible en texte ? Sinon, l'information n'existe qu'en couleur et en longueur de barre.
2. Le test de sémantique : la valeur mesure-t-elle un état (<meter>) ou l'avancement d'une tâche (<progress>) ? Inverser les deux est le bug le plus courant du motif.
3. Au clavier : Tab ne doit jamais s'arrêter sur la jauge.
4. Au lecteur d'écran : attendre « étiquette, jauge, valeur ». Si rien n'est annoncé, la jauge est sans nom (rappel : le texte de repli entre les balises n'en est pas un).

Deux outils gratuits du site aident sur ce composant : le Calculateur de Contraste pour mesurer les rapports exigés par les critères 3.2 et 3.3 (texte de la valeur et couleurs de la barre), et le Simulateur de Daltonisme pour vérifier qu'une jauge verte ou rouge reste compréhensible quand on ne distingue pas ces couleurs (critère 3.1).

Approfondir avec les fiches critères

• Critère 3.1 : Information par couleur
• Critère 3.2 : Contraste texte
• Critère 3.3 : Contraste graphiques
• Critère 7.1 : Compatibilité scripts

Toutes les fiches composants accessibles