Semântica de botão
O que a norma pede
Todo botão está marcado no código como botão, para ser reconhecido e acionado pela tecnologia assistiva e pelo teclado.
- 1.3.1 (A)
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:
Marque no protótipo como botão todo elemento que executa uma ação, como ícones clicáveis e cards que abrem modais, mesmo quando não parecem botões. Documente os estados do botão, incluindo o foco.
Ícone de favoritar
Um coração marca o serviço como favorito.
Errado: Só o ícone
Na especificação
Ícone de coração, “ao clicar, favorita”.
Pode virar um ícone sem semântica de botão.
Certo: Botão de alternância
Na especificação
Botão “Favoritar serviço”, estados marcado e desmarcado.
O código nasce com a semântica certa.
Use o elemento button, que já recebe foco e responde ao teclado sem código extra. Se precisar de outro elemento, aplique role="button" e tabindex="0" e trate as duas teclas; em botões de alternância, use aria-pressed.
Botão de favoritar
Implementação do coração.
Errado: Div clicável
<div class="coracao" onclick="favoritar()"></div>Não recebe foco e não é anunciado.
Certo: Botão nativo
<button type="button" aria-pressed="false" onclick="favoritar()"> <svg aria-hidden="true">…</svg> Favoritar serviço </button>Anunciado como botão, com estado.
Inclua nos critérios de aceite que as ações sejam implementadas com button e que a biblioteca de componentes use botões nativos. Botões falsos estão entre as causas mais comuns de fluxos que não funcionam pelo teclado.
Botão “Confirmar agendamento”
O botão final do fluxo de agendamento.
Errado: Div estilizada
Situação
O botão é uma div com clique.
Quem usa teclado não conclui o agendamento.
Certo: Botão nativo
Situação
Botão nativo do componente padrão.
O fluxo funciona para todos.
Chegue a cada ação com Tab e confira se o leitor de tela a anuncia como botão. Acione cada uma com Enter e com Espaço; as duas teclas precisam funcionar.
Coração de favoritar
Teste com teclado e leitor de tela.
Errado: Não alcançável
Tab → pula o coração
A ação não existe para o teclado.
Certo: Botão completo
Tab → “Favoritar serviço, botão de alternância, não pressionado”
Espaço → “pressionado”
Funciona e informa o estado.
Escreva para cada botão um texto com verbo que diga a ação, inclusive para os que só mostram um ícone. O mesmo tipo de ação deve ter o mesmo texto em todo o produto.
Botão de ícone
Um ícone de impressora na página do comprovante.
Errado: Sem texto
Texto do botão
(nenhum)
O botão é anunciado sem nome.
Certo: Com a ação
Texto do botão
“Imprimir comprovante”
A ação é clara.