Rampsight

Todas as regras

ARIA

Medidores precisam de nome

Por que isso importa

role="meter" anuncia um valor sem dizer o que está sendo medido — “7 de 10” sem assunto.

Como corrigir

  1. Acrescente aria-label ou aria-labelledby nomeando a grandeza (“Armazenamento usado”).
  2. Mantenha aria-valuemin, aria-valuemax e aria-valuenow para que o valor tenha escala.

Na marcação

Falha
<div role="meter" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10"></div>
Passa
<div role="meter" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10"
     aria-label="Storage used"></div>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

Para aprofundar

Deque University sobre aria-meter-name (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.