Solo porque puedes no significa que debas: el elemento <meter>

Artículo original ↗ Discusión en Hacker News ↗

El elemento `<meter>` de HTML está pensado como una forma semántica de representar valores escalares dentro de un rango conocido (como el nivel de combustible o el uso de CPU), pero los desarrolladores sostienen que a menudo se malinterpreta, se ejemplifica mal en la documentación y es difícil de estilizar de forma consistente entre navegadores. Los comentaristas debaten cuándo los medidores son preferibles a los números en bruto o a las barras de progreso, cómo la semántica afecta a herramientas de accesibilidad como los lectores de pantalla, y si HTML debería priorizar el significado estricto o un comportamiento de interfaz más flexible. Muchos concluyen que `<meter>` puede ser útil cuando se combina con valores numéricos visibles y contexto claro, pero que las directrices actuales y el soporte de los navegadores facilitan su uso incorrecto.

Alcance y semántica de <meter>

  • Muchos ven <meter> como útil cuando se quiere transmitir un valor dentro de un rango conocido más umbrales (min/max, low/high, optimum), por ejemplo, nivel de combustible, zonas de temperatura, indicadores de maquinaria, estadísticas de personaje, encuestas o nivel de micrófono.
  • <progress> se considera especializado: una tarea que avanza hacia su finalización, a veces indeterminada, en su mayoría hacia adelante. <meter> es para métricas arbitrarias que pueden subir y bajar.
  • Varios argumentan que los ejemplos de temperatura de horno y puntuación de exámenes de MDN usan mal <meter> al reemplazar texto numérico claro por barras ambiguas.

HTML semántico vs funcionalidad

  • Una línea de argumento: los elementos HTML vinculan la función (“lo que hace”) con la semántica (“para qué sirve”), lo que provoca usos indebidos cuando los desarrolladores quieren el comportamiento pero no el significado.
  • Entre las sugerencias se incluye un atributo para señalar un uso “fuera de etiqueta” o invertir el valor predeterminado para que la funcionalidad bruta sea la opción por defecto y la semántica requiera activación explícita.
  • Otros insisten en que los elementos semánticos se definen precisamente por su significado previsto, no por su comportamiento visual.

Accesibilidad y ARIA

  • <meter> se presenta en gran medida como una función de accesibilidad; sin él, los desarrolladores lo aproximarían con imágenes estilizadas o <div>s, que tienen menos significado para las tecnologías de asistencia.
  • role="meter" de ARIA se propone como una alternativa que conserva la semántica y a la vez permite un estilo totalmente personalizado.
  • Algunos advierten que las etiquetas semánticas menos comunes pueden exponer errores e inconsistencias en navegadores y lectores de pantalla.

Dolor de estilo e implementación

  • Varios comentarios describen el estilo de <meter>/<progress> como una “pesadilla”: pseudo-elementos no estándar con prefijos de proveedor, comportamientos en conflicto entre navegadores.
  • Se critica la imposibilidad de aplicar pseudo-elementos como ::before a elementos reemplazados, porque bloquea mejoras sencillas (por ejemplo, mostrar el valor numérico vía CSS).

Medidores vs. mostradores numéricos en el diseño de UI

  • Un largo subhilo debate sobre indicadores analógicos frente a lecturas numéricas (coches, combustible, tacómetro, discos, CPU/RAM):
    • A favor del indicador: escaneo periférico rápido, umbrales claros (zonas verdes/rojas), sensación de tasa de cambio, bueno para comprobaciones de “¿está bien esto?”.
    • A favor del número: comparación precisa y directa con límites numéricos (por ejemplo, límite de velocidad), más rápido de interpretar para algunas personas, especialmente quienes están más acostumbradas a los números que a los diales analógicos.
    • Muchos abogan por pantallas combinadas (indicador + número) y la personalización por parte del usuario; algunos señalan la neurodiversidad y que no todos los cerebros procesan las imágenes de la misma manera.

Semántica HTML en una web centrada en la UI

  • Un comentarista cuestiona si HTML puede ser “semántico” cuando la web es en gran medida una GUI, no hipertexto.
  • Las respuestas sostienen que la semántica sigue importando: encabezados, enlaces, botones y roles definen estructura y comportamiento, permitiendo la navegación por teclado y las tecnologías de asistencia.
  • Se citan los roles y atributos ARIA como una forma de superponer semántica explícita sobre componentes de interfaz.

Estándares y complejidad

  • Una nota crítica sugiere que la proliferación de elementos como <meter> contribuye a especificaciones enormes y complejas que solo las grandes empresas pueden implementar de forma realista, reforzando los monopolios de los navegadores.

Sentimiento general

  • Amplio acuerdo en que el ejemplo de MDN era malo, no en que <meter> sea inherentemente malo.
  • Muchos prefieren usar <meter> junto con un valor numérico visible, en lugar de elegir entre barra y número.