Sobes.tech
Middle

Se um link parece um botão, deve-se mesmo assim formatá-lo como um botão?

sobes.tech IA

Resposta da IA

Os links (etiqueta <a>) são usados para navegar para outra página ou recurso. Os botões (etiqueta <button>) realizam ações na página atual, como enviar um formulário ou chamar uma função JavaScript.

Se um elemento realiza uma ação mas parece um link, deve ser marcado como <button>. E vice-versa, se um elemento leva a outra página mas parece um botão, é melhor usar <a>.

Justificação do ponto de vista de acessibilidade:

  • Semântica: Leitores de tela e outras tecnologias de assistência usam a semântica das tags para entender a função do elemento. Um botão é percebido como um elemento interativo que pode ser ativado, um link como um elemento de navegação.
  • Interação com teclado: Por padrão, botões são ativados com a tecla Enter ou Space, links apenas com Enter. Usuários que navegam com teclado esperam esse comportamento.
  • Estilização e JavaScript: Usar as tags corretas facilita a aplicação de estilos e manipuladores de eventos.

Exemplo de um link como botão:

<a href="/page" class="button">Ir para a página</a>

Exemplo de um botão que imita um link (pouco comum, mas possível para soluções UX específicas):

<button type="button" onclick="doSomething()" class="link">Executar ação</button>

De modo geral, siga a semântica: links para navegação, botões para ações.