Semântica
O nome acessível precisa conter o texto visível
- Regra:
label-content-name-mismatch - Gravidade: Grave
- Nível WCAG A
Por que isso importa
Quem usa comando de voz fala o que vê: “clicar Finalizar pedido”. Se o aria-label disser “Enviar”, o comando não encontra nada e o controle fica impossível de operar por voz.
Como corrigir
- Faça o nome acessível começar pelo texto visível, ou contê-lo palavra por palavra.
- Acrescente detalhes depois do texto visível em vez de substituí-lo (“Finalizar pedido agora”).
- Quando o nome acrescenta contexto, prefira aria-describedby para que o texto visível continue sendo o nome.
Na marcação
<button aria-label="Submit">Place order</button><button aria-label="Place order now">Place order</button>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:
- 2.5.3 Rótulo no nome (abre em nova aba) — Nível WCAG A
Para aprofundar
Deque University sobre label-content-name-mismatch (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.