Medidor

Código

Copiar el marcado

Un meter sin clase no necesita ninguna: tiene el tamaño del componente y los colores del navegador.

<label for="storage">Storage used, 6 of 10 GB</label>
<meter id="storage" value="6" min="0" max="10">6 of 10 GB</meter>

.luz-meter dibuja la barra y su pista en el color de marca.

Una barra en la celda de su cifra, dentro de una tabla. La cifra es texto, así que la barra es una representación visual y se oculta a las tecnologías de asistencia:

<table class="luz-table">
  <caption>Parcels per route</caption>
  <thead>
    <tr><th scope="col">Route</th><th scope="col" class="luz-table__numeric">Parcels</th></tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Route">Sevilla to Madrid</td>
      <td class="luz-table__numeric" data-label="Parcels">1,204<meter class="luz-meter" value="1204" min="0" max="1500" aria-hidden="true">1,204 of 1,500</meter></td>
    </tr>
    <tr>
      <td data-label="Route">Cádiz to Málaga</td>
      <td class="luz-table__numeric" data-label="Parcels">312<meter class="luz-meter" value="312" min="0" max="1500" aria-hidden="true">312 of 1,500</meter></td>
    </tr>
  </tbody>
</table>

Una barra independiente, con un nombre visible y la cifra dentro:

<label for="storage">Storage used, 6 of 10 GB</label>
<meter class="luz-meter" id="storage" value="6" min="0" max="10">6 of 10 GB</meter>

Variantes y opciones

Una clase. La barra se configura con atributos nativos.

Cómo funciona

El elemento nativo <meter>, con estilos de components/meter.css: una barra de 8 px, del ancho completo de su contenedor y de al menos 8rem de largo, con el color de marca como relleno y un borde de 1 px del color del borde del campo, para que se vea toda su longitud en cualquier superficie.

• El navegador dibuja el relleno como el valor value entre min y max.
• Todos los estados usan el mismo color. La cifra y la escala indican qué significa el valor, no un color verde o rojo: los colores de estado conservan sus significados (alertas, etiquetas).
• Usa el mismo max en todas las filas de una tabla; de lo contrario, las barras engañan.
• En el modo de colores forzados, la barra conserva el borde y muestra el relleno con el color de resaltado del sistema.
• El texto dentro del elemento es la alternativa para los navegadores que no lo dibujan. Incluye también la cifra.

Sin JavaScript

La barra muestra el valor del marcado. Para cambiarlo necesitas tu propio script, que establece value.

Teclado y ARIA

Un medidor no es interactivo y no recibe el foco.

• Junto a su cifra, en la misma celda o línea, oculta la barra con aria-hidden="true": la cifra es el texto y la tabla es el gráfico accesible. Quien la consulta oye la cifra una sola vez.
• Coloca la barra en la celda de su cifra, no en una columna propia: una columna de barras se leería como una columna de celdas vacías. Si quieres una columna para la barra, cada celda debe incluir su propio texto visible, como «80 %», bajo un encabezado que explique qué representa.
• Un medidor que no esté oculto necesita un nombre: un <label for> o aria-labelledby. Entonces se lee como «valor, mínimo, máximo», por lo que repite una cifra que ya aparece: ocúltalo salvo que esté aislado.
• La barra es una representación visual de la cifra en la misma celda: la tecnología de asistencia lee la cifra.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un medidor para representar un valor dentro de un intervalo conocido, junto a su cifra y en unas pocas filas o unas cuantas decenas de filas que compartan escala: una parte de un total o un recuento respecto a una cuota.

Cuándo no usarlo

No uses un medidor para una tarea en curso: usa la barra de progreso.

• Para mostrar una tendencia a lo largo del tiempo, usa una biblioteca de gráficos y conserva la tabla como alternativa textual. LUZ no dibuja gráficos de líneas, áreas ni sectores.
• Si la cifra exacta importa más que la forma, omite la barra: la cifra ya está ahí.
• No uses el color de la barra para indicar si algo va bien o mal: siempre es el color de marca.

Qué hacer y qué no

Cómo escribir el contenido

La cifra es el contenido; la barra solo muestra cómo se compara.

• Incluye la cifra en texto en la misma celda o línea, y su unidad en el encabezado de la columna: «Paquetes».
• Indica la escala en el pie o el encabezado cuando no sea evidente: «Paquetes por ruta, esta semana».
• Dentro del elemento, escribe la cifra y el intervalo como alternativa: «1.204 de 1.500».

Contraste y foco

El relleno usa el color de marca sobre una pista apagada. La pista tiene un borde del color del borde del campo, para que se vea dónde acaba la barra.

Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: la barra no lo recibe.
• No solo color: la cifra aparece en texto junto a la barra, así que el valor nunca depende de distinguir las dos partes de la barra.

Tokens que usa

Los 4 tokens que lee components/meter.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-primary, --luz-input-border, --luz-surface-muted

Radius

--luz-radius-sm

El teclado y ARIA están en la pestaña Código.