Nomes e papéis

Botões precisam de nome

Regra: button-name
Gravidade: Crítico
Nível WCAG A

Por que isso importa

Um botão cujo conteúdo é só um ícone é anunciado como “botão” e nada mais. Numa barra com seis ícones, todos os seis soam iguais.

Como corrigir

Coloque texto visível no botão sempre que o design permitir.
Caso contrário, use aria-label com a ação em forma de verbo (“Fechar diálogo”).
Coloque aria-hidden="true" no ícone para que ele não seja lido junto com o rótulo.
Confira se um rótulo escondido por CSS não é o único nome — display:none também o remove do nome.

Na marcação

Falha

<button><svg aria-hidden="true">...</svg></button>

Passa

<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</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:

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

Para aprofundar

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