Propósito do botão
O que a norma pede
Todo botão tem texto, texto alternativo ou nome acessível que indica a sua função.
- 4.1.2 (A)
- 2.4.6 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Prefira ícones acompanhados de texto. Para ícones sozinhos, anote o nome da ação, e em ações repetidas numa lista inclua o item no nome.
Barra de ações do documento
Ícones de baixar, compartilhar e excluir.
Errado: Ícones sem nome
Na especificação
Três ícones sem rótulo.
Cada um vira “botão” sem nome.
Certo: Ícones nomeados
Na especificação
“Baixar documento”, “Compartilhar documento”, “Excluir documento”.
Cada ação é identificável.
Dê a todo botão um texto visível ou um nome com aria-label, e esconda os ícones decorativos com aria-hidden. Em listas, inclua o item no nome, como “Excluir processo 123”.
Botão de excluir na tabela
Cada linha tem um ícone de lixeira.
Errado: Sem nome
<button><svg>…</svg></button>Anunciado como “botão”.
Certo: Nome específico
<button aria-label="Excluir processo 123"> <svg aria-hidden="true">…</svg> </button>Anunciado como “Excluir processo 123, botão”.
Inclua nos critérios de aceite que todo botão tenha nome acessível e use a verificação automática, que detecta botões sem nome. Priorize ações de exclusão e de pagamento.
Auditoria automática
A ferramenta encontra 40 botões sem nome.
Errado: Corrigir aos poucos
Decisão
Sem prazo definido.
Ações críticas seguem invisíveis.
Certo: Corrigir por risco
Decisão
Primeiro os botões de excluir e pagar; depois os demais.
Os maiores riscos saem primeiro.
Liste os botões com o leitor de tela e confira se o nome anunciado diz a função. Registre botões sem nome ou chamados só de “ícone”, e botões repetidos que não se distinguem.
Lista de botões
O leitor de tela lista os botões da tabela de processos.
Errado: Nomes vazios
“Botão”
“Botão”
“Botão”
Impossível escolher a ação.
Certo: Nomes claros
“Ver processo 123, botão”
“Baixar processo 123, botão”
“Excluir processo 123, botão”
Cada ação é inequívoca.
Comece o nome do botão com um verbo específico, como “Baixar” ou “Cancelar inscrição”, e inclua o objeto quando houver mais de um igual na tela. Evite “Clique aqui” e “Sim” soltos.
Confirmação de cancelamento
Modal pergunta se a pessoa quer cancelar a inscrição.
Errado: Sim e Não
Botões
[Sim] [Não]
Fora da pergunta, não se sabe o que cada um faz.
Certo: Ações explícitas
Botões
[Cancelar inscrição] [Manter inscrição]
Cada botão diz o resultado.