Uso de links
O que a norma pede
Links são usados para navegar (ir a outra página ou a outro ponto da página). Ações como enviar, abrir ou excluir são botões.
- 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:
Use botão para ações, como enviar ou excluir, e link para mudar de página ou de seção. Não disfarce um como o outro sem necessidade.
“Excluir cadastro”
A opção aparece como texto azul sublinhado.
Errado: Ação como link
Na especificação
“Excluir cadastro” — link que dispara a exclusão.
A pessoa espera navegar e acaba excluindo.
Certo: Ação como botão
Na especificação
“Excluir cadastro” — botão secundário, com confirmação.
O elemento diz o que vai acontecer.
Use button para ações, mesmo que estilizado como link, e a com href real para navegação. Evite href="#" e href="javascript:void(0)" para executar ações.
Abrir o modal de ajuda
Um texto “Precisa de ajuda?” abre um modal.
Errado: Link sem destino
<a href="#" onclick="abrirAjuda()">Precisa de ajuda?</a>Anunciado como link, mas abre um modal.
Certo: Botão
<button type="button" class="estilo-link" onclick="abrirAjuda()"> Precisa de ajuda? </button>Anunciado como botão, age como botão.
Documente no sistema de design quando usar link e quando usar botão, e revise as ações críticas implementadas como links. A confusão entre os dois aumenta erros em ações importantes.
Cancelamento de agendamento
O cancelamento é feito por um “link”.
Errado: Link que cancela
Situação
Um link GET cancela o agendamento.
Buscadores e pré-carregamento podem até cancelar sem querer.
Certo: Botão com confirmação
Situação
Botão “Cancelar agendamento” com confirmação.
A ação é clara e segura.
Acione cada link e confira se ele leva a outra página ou posição; procure links que abrem modais ou excluem algo. Botões precisam responder tanto a Enter quanto a Espaço.
“Precisa de ajuda?”
O leitor de tela chega ao elemento.
Errado: Anúncio enganoso
“Precisa de ajuda?, link”
Enter → abre um modal na mesma página
O comportamento não é o de um link.
Certo: Anúncio correto
“Precisa de ajuda?, botão”
Espaço → abre o modal
A pessoa sabe o que esperar.
Nomeie links pelo destino, como “Edital de 2025”, e botões pela ação, com verbo, como “Enviar inscrição”. Evite o mesmo texto para um link e um botão na mesma tela.
Textos de navegação e ação
Uma tela tem um link e um botão.
Errado: Textos ambíguos
Na tela
Link “Clique aqui” e botão “Clique aqui”.
Não se sabe o que cada um faz.
Certo: Textos claros
Na tela
Link “Regras do programa” e botão “Enviar inscrição”.
Destino e ação ficam evidentes.