Links e Botões: Cada Elemento com a Sua Função

Link e botão podem receber o mesmo CSS, mas comunicam intenções diferentes. A pergunta decisiva não é "como ele parece?", e sim "o que acontece ao ativá-lo?".

<!-- Navega e cria uma entrada no histórico do navegador -->
<a href="/pedidos/1042">Ver detalhes do pedido</a>

<!-- Altera o estado da interface atual -->
<button type="button" aria-expanded="false" aria-controls="filtros">
  Mostrar filtros
</button>

Link navega

Use <a href="..."> quando a ação leva a outro endereço, documento ou seção navegável. A pessoa pode abrir em nova aba, copiar o endereço e usar Voltar.

Botão executa uma ação

Use <button> para abrir menu, salvar, excluir, enviar, pausar ou alterar algo na interface. Em formulários, declare o tipo para evitar envios acidentais:

<button type="button">Adicionar endereço</button>
<button type="submit">Finalizar cadastro</button>

O nome precisa fazer sentido

Evite uma página cheia de links chamados "clique aqui". Prefira nomes que continuem claros fora do parágrafo:

<a href="/fatura">Baixar fatura de agosto</a>

Compare como uma lista de links pode ser anunciada:

Ruim:  "clique aqui", "clique aqui", "saiba mais"
Bom:   "Baixar fatura de agosto", "Rastrear pedido 1042", "Conhecer o plano Pro"

Controles só com ícone também precisam de nome

O desenho de uma lupa pode ser evidente visualmente, mas não fornece um nome por si só. Use texto visível quando houver espaço; em um botão realmente compacto, forneça um nome acessível:

<button type="button" aria-label="Pesquisar">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

O aria-label deve descrever a ação, não o formato do ícone. "Pesquisar" é melhor que "Lupa".

Decisão rápida

• Link muda o destino da navegação.
• Botão executa uma ação na interface.
• Nome acessível precisa explicar a finalidade do controle.

Dica: se você precisa adicionar role="button" a um link só para ele "virar botão", provavelmente escolheu o elemento errado.

Teste prático

Use Tab para chegar ao controle e escute ou leia seu nome fora do contexto da página. Depois tente Enter; em botões, teste também Espaço. O resultado deve ser previsível pelo nome e pela função anunciada.

No próximo nó, vamos guardar o mouse e navegar pela interface usando só o teclado.