Une fiche produit affiche le stock restant sous forme de jauge colorée, un bulletin scolaire affiche une note sur 20, un tableau de bord affiche l'espace disque utilisé sur un serveur. Ces trois informations ont un point commun : ce sont des mesures figées, prises à un instant donné, comprises entre un minimum et un maximum connus à l'avance. Colorer un simple <div> en CSS pour représenter ce chiffre fonctionne à l'écran, mais ne dit rien à un lecteur d'écran ni à un moteur de recherche.
La balise <meter> a été conçue pour ce cas précis : donner un sens à une valeur numérique bornée, sans se substituer à une jauge d'avancement.
Définition
<meter> représente une mesure scalaire à l'intérieur d'une échelle connue à l'avance. Le navigateur sait, grâce à ses attributs, où se situe la valeur entre un minimum et un maximum, et peut même juger si elle se trouve dans une zone jugée basse, haute ou optimale. Rien de tout cela n'est visuel par défaut : l'apparence reste une simple barre grise, mais le sens porté par la balise est immédiatement disponible pour les technologies d'assistance et pour le navigateur lui-même.
Ce que <meter> ne représente jamais, c'est une tâche en train de se dérouler. Un niveau de batterie à 40 % est une mesure. Un téléchargement à 40 % est une tâche en cours, et relève de <progress>.
Syntaxe et attributs
Cinq attributs numériques suffisent à décrire entièrement une jauge. Aucun n'est obligatoire à part value, mais laisser les autres à leurs valeurs par défaut prive le navigateur d'informations utiles.
| Attribut | Rôle |
|---|---|
value | La mesure actuelle, seul attribut réellement indispensable |
min | La borne basse de l'échelle, 0 par défaut |
max | La borne haute de l'échelle, 1 par défaut |
low | Le seuil en dessous duquel la valeur est jugée basse |
high | Le seuil au-dessus duquel la valeur est jugée haute |
optimum | La zone idéale, qui détermine si low ou high est une bonne ou une mauvaise nouvelle |
L'attribut optimum mérite un mot d'explication, car il inverse parfois le sens de low et high. Pour un niveau de batterie, une valeur haute est souhaitable : l'optimum se situe donc du côté de high. Pour un taux d'erreurs, c'est l'inverse : l'optimum se situe du côté de low, et la plupart des navigateurs colorent alors la jauge en rouge lorsque la valeur grimpe.
Exemple concret
Voici une jauge de stock affichée sur une fiche produit, avec un seuil d'alerte fixé à dix unités.
<label for="stock">Stock disponible</label>
<meter id="stock" min="0" max="100" low="10" high="60" optimum="100" value="8">
8 articles restants
</meter>Le contenu placé entre les balises ouvrante et fermante, ici 8 articles restants, s'affiche uniquement dans les navigateurs trop anciens pour comprendre <meter>. Il vaut donc la peine de l'écrire en toutes lettres plutôt que de le laisser vide.
Différence avec <progress>
Les deux balises se ressemblent au premier coup d'œil : une barre, une valeur, un maximum. La distinction tient pourtant à une question simple : la valeur avance-t-elle mécaniquement vers son maximum, ou représente-t-elle un état mesuré à un instant donné ? Un téléchargement, l'étape d'un formulaire en plusieurs pages ou l'installation d'une mise à jour avancent vers un achèvement : c'est <progress>. Un niveau de batterie, une note d'examen ou un taux de remplissage sont des mesures : c'est <meter>.
La confusion la plus fréquente consiste à utiliser <meter> pour une barre de chargement. Le navigateur ne s'en offusque pas techniquement, mais les technologies d'assistance annoncent alors une mesure statique là où l'utilisateur attend un statut qui évolue, et l'attribut optimum n'a simplement aucun sens pour une tâche en cours.
Sémantique et accessibilité
Un lecteur d'écran qui rencontre <meter> annonce un rôle dédié, la valeur actuelle et sa position par rapport au minimum et au maximum, sans qu'aucun attribut ARIA ne soit nécessaire. Un <div> habillé en CSS pour ressembler à une jauge n'offre rien de tout cela par défaut : il faudrait reconstruire à la main, avec role="meter" et plusieurs attributs aria-*, ce que <meter> fournit gratuitement.
Toujours associer un <label> ou un texte explicite à la jauge : la valeur seule, sans unité ni contexte, ne dit rien à quelqu'un qui ne voit pas la couleur du rendu visuel.
Questions fréquentes
meter ?Oui, via les pseudo-éléments CSS ::-webkit-meter-bar et apparentés, mais le résultat varie sensiblement d'un navigateur à l'autre et le contrôle reste partiel comparé à une jauge entièrement redessinée en CSS ou en SVG. Beaucoup de projets se contentent du rendu natif, suffisant pour un tableau de bord interne.
value dépasse max ?Le navigateur ramène silencieusement l'affichage à la borne maximale, sans erreur ni avertissement dans la console. Une valeur mal calculée côté serveur produit donc une jauge pleine plutôt qu'un plantage, ce qui peut masquer un bug de calcul en amont si personne ne vérifie les chiffres transmis.
Meter convient-il pour une note sur 20 ou un système d'étoiles ?Pour une note chiffrée affichée en lecture seule, oui : min="0" max="20" value="14" décrit exactement une note de 14 sur 20. Pour un système d'étoiles cliquable qui sert à noter quelque chose, en revanche, un groupe de boutons radio reste plus adapté, car <meter> n'est jamais interactif.