Só porque você pode não significa que você deve: o elemento <meter>

Artigo original ↗ Discussão no Hacker News ↗

O elemento `<meter>` do HTML foi criado como uma forma semântica de representar valores escalares dentro de um intervalo conhecido (como nível de combustível ou uso de CPU), mas os desenvolvedores argumentam que ele costuma ser mal compreendido, mal exemplificado na documentação e difícil de estilizar de forma consistente entre navegadores. Os comentários discutem quando medidores são preferíveis a números brutos ou barras de progresso, como a semântica afeta ferramentas de acessibilidade como leitores de tela e se o HTML deve priorizar significado estrito ou comportamento flexível de interface. Muitos concluem que `<meter>` pode ser útil quando combinado com valores numéricos visíveis e contexto claro, mas que a orientação atual e o suporte dos navegadores facilitam seu uso indevido.

Escopo e semântica de <meter>

  • Muitos veem <meter> como útil ao transmitir um valor dentro de um intervalo conhecido, além de limites (min/max, low/high, optimum), por exemplo, nível de combustível, faixas de temperatura, medidores de máquinas, atributos de personagens, enquetes ou nível do microfone.
  • <progress> é visto como especializado: uma tarefa avançando rumo à conclusão, às vezes indeterminada, em geral seguindo adiante. <meter> é para métricas arbitrárias que podem subir e descer.
  • Vários argumentam que os exemplos de temperatura de forno e pontuação de prova da MDN usam mal <meter>, substituindo texto numérico claro por barras ambíguas.

HTML semântico vs funcionalidade

  • Uma linha de argumento: elementos HTML vinculam função (“o que faz”) à semântica (“para que serve”), causando uso indevido quando os desenvolvedores querem o comportamento, mas não o significado.
  • As sugestões incluem um atributo para sinalizar uso “off-label” ou inverter o padrão para que a funcionalidade bruta seja o padrão e a semântica exija ativação explícita.
  • Outros enfatizam que elementos semânticos são definidos precisamente pelo significado pretendido, não pelo comportamento visual.

Acessibilidade e ARIA

  • <meter> é apresentado em grande parte como um recurso de acessibilidade; sem ele, os desenvolvedores aproximariam o efeito com imagens estilizadas ou <div>s, que são menos significativos para tecnologias assistivas.
  • O papel ARIA role="meter" é proposto como alternativa que preserva a semântica enquanto permite estilização totalmente personalizada.
  • Alguns alertam que tags semânticas menos comuns podem expor bugs e inconsistências de navegador/leitor de tela.

Dores de estilo e implementação

  • Vários comentários descrevem a estilização de <meter>/<progress> como um “pesadelo”: pseudo-elementos não padronizados com prefixos de fornecedor, comportamentos conflitantes entre navegadores.
  • A incapacidade de aplicar pseudo-elementos como ::before a elementos substituídos é criticada por bloquear melhorias simples (por exemplo, mostrar o valor numérico via CSS).

Medidores vs exibições numéricas no design de UI

  • Um longo subthread debate mostradores analógicos vs leituras numéricas (carros, combustível, tacômetro, discos, CPU/RAM):
    • Pró-medidor: varredura periférica rápida, limiares claros (zonas verdes/vermelhas), sensação de taxa de variação, bom para checagens de “está OK?”.
    • Pró-número: comparação precisa e direta com limites numéricos (por exemplo, limite de velocidade), mais rápido para algumas pessoas interpretarem, especialmente as mais acostumadas com números do que com mostradores analógicos.
    • Muitos defendem exibições combinadas (medidor + número) e personalização pelo usuário; alguns observam neurodiversidade e que nem todos os cérebros processam visuais da mesma forma.

Semântica HTML em uma web centrada em UI

  • Um comentarista questiona se o HTML pode ser “semântico” quando a web é em grande parte GUI, não hipertexto.
  • As respostas argumentam que a semântica ainda importa: títulos, links, botões e papéis definem estrutura e comportamento, permitindo navegação por teclado e tecnologia assistiva.
  • Papéis e atributos ARIA são citados como uma forma de sobrepor semântica explícita a componentes de UI.

Padrões e complexidade

  • Uma nota crítica sugere que a proliferação de elementos como <meter> contribui para especificações enormes e complexas que só grandes empresas conseguem implementar realisticamente, reforçando monopólios de navegadores.

Sentimento geral

  • Há amplo consenso de que o exemplo da MDN era ruim, não que <meter> seja inerentemente ruim.
  • Muitos preferem usar <meter> junto com um valor numérico visível, em vez de escolher entre barra e número.