O antipadrão da âncora sem href

Um antipadrão comum é uma âncora sem href, configurada com um manipulador de clique para agir como um botão. Parece funcionar, mas causa problemas.

Uma âncora só conta como um link real quando tem um href. Sem ele, o navegador não a trata como um elemento interativo.

Uma âncora sem href não pode receber foco. Assim, usuários de teclado que percorrem a página com Tab passam direto por ela e nunca conseguem acessá-la.

Mesmo que você force o foco nela, um link falso ignora Enter e Espaço por padrão; portanto, usuários de teclado ainda não conseguem ativá-lo.

Sem href, um leitor de tela pode não anunciar a âncora como um link, e os usuários nunca saberão que ela pode ser usada.

Algumas pessoas corrigem isso usando um href que contém apenas uma cerquilha. Isso permite que o elemento receba foco, mas também leva a página ao topo, o que é desconcertante.

Se o controle executa uma ação, use um botão real. Você obtém foco, suporte ao teclado e a função correta automaticamente.

Se o controle realmente faz uma navegação, mantenha a âncora, mas dê a ela um href real apontando para o destino.

Desenvolvedores frequentemente escolhem uma âncora por causa do estilo sublinhado. Porém, é possível estilizar um botão sem sacrificar a acessibilidade.

Uma âncora sem href também perde o cursor de ponteiro por padrão, indicando aos usuários que enxergam que nada ali é realmente clicável.

Não simule interatividade. Escolha um botão real para ações ou uma âncora com href para navegação e evite soluções improvisadas.

Uma âncora sem href é um link falso: não pode receber foco e não funciona com o teclado. Use um botão para ações e um href real para navegação. ✅