Uso de botões
O que a norma pede
Botões são usados para acionar funcionalidades, e não para navegar para outras páginas.
- 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:
Anote se cada chamada para ação navega ou executa algo. Se navega, especifique um link com estilo de botão; se executa, especifique um botão.
“Começar agora”
A chamada leva à primeira página do formulário.
Errado: Comportamento não definido
Na especificação
“Botão: Começar agora.”
Pode virar um botão que muda de página.
Certo: Link com estilo de botão
Na especificação
“Link com estilo de botão primário: leva a /inscricao/passo-1.”
O elemento corresponde à ação.
Use a com href para mudar de página, mesmo com visual de botão, e button para ações na mesma página. Um botão que navega com location.href impede abrir em nova aba e engana o leitor de tela.
Chamada para a inscrição
Implementação do “Começar agora”.
Errado: Botão que navega
<button onclick="location.href='/inscricao'">Começar agora</button>Anunciado como botão, mas muda de página.
Certo: Link estilizado
<a href="/inscricao" class="botao-primario">Começar agora</a>Anunciado como link e abre em nova aba.
Ofereça no sistema de design um link com estilo de botão e inclua a regra de uso no guia de desenvolvimento. Quando o elemento diz uma coisa e faz outra, a pessoa perde a confiança na interface.
Biblioteca de componentes
A biblioteca só tem o componente Botão.
Errado: Só botão
Situação
Toda chamada visual vira button, inclusive as que navegam.
A navegação fica inconsistente.
Certo: Botão e link-botão
Situação
Componentes separados: Botão (ação) e LinkBotão (navegação).
Cada caso usa o elemento certo.
Acione cada botão e observe se o endereço da página muda; tente também abri-lo em nova aba. Botões que navegam deveriam ser links.
“Começar agora”
Teste com leitor de tela.
Errado: Anúncio e ação divergem
“Começar agora, botão”
Enter → abre outra página
Deveria ser link.
Certo: Anúncio coerente
“Começar agora, link”
Enter → abre a inscrição
O anúncio corresponde ao comportamento.
Use verbos de ação nos botões, como “Enviar”, e o destino nos links, como “Ver regras”, mesmo quando o link tem visual de botão. Evite “OK” e “Continuar” sem contexto.
Botões do final do formulário
Dois botões lado a lado.
Errado: Textos genéricos
Na tela
[Continuar] [OK]
Não se sabe o que cada um faz.
Certo: Textos específicos
Na tela
[Salvar rascunho] [Enviar inscrição]
Cada botão diz sua ação.