ARIA

Botões, links e itens de menu em ARIA precisam de nome

Regra: aria-command-name
Gravidade: Grave
Nível WCAG A

Por que isso importa

Um elemento com role="button", "link" ou "menuitem" sem texto é anunciado apenas como “botão”: não há como saber o que ele faz antes de acioná-lo.

Como corrigir

Coloque texto visível dentro do elemento sempre que o design permitir.
Em controles só de ícone, use aria-label com a ação (“Excluir”, “Adicionar ao carrinho”).
Marque o ícone decorativo com aria-hidden="true" para que ele não entre no nome.

Na marcação

Falha

<div role="button" tabindex="0"><svg aria-hidden="true">...</svg></div>

Passa

<div role="button" tabindex="0" aria-label="Delete">
  <svg aria-hidden="true">...</svg>
</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:

4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre aria-command-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.