ARIA
Barras de progresso precisam de nome
- Regra:
aria-progressbar-name - Gravidade: Grave
- Nível WCAG A
Por que isso importa
Uma barra de progresso sem nome anuncia um percentual e mais nada: é impossível saber a qual de várias operações ela se refere.
Como corrigir
- Acrescente aria-label ou aria-labelledby nomeando a tarefa (“Progresso do envio”).
- Em progresso indeterminado, omita aria-valuenow em vez de defini-lo como 0.
Na marcação
<div role="progressbar" aria-valuenow="40"></div><div role="progressbar" aria-valuenow="40" aria-label="Upload progress"></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:
- 1.1.1 Conteúdo não textual (abre em nova aba) — Nível WCAG A
Para aprofundar
Deque University sobre aria-progressbar-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.