Usando a Tag <a> Sem o Atributo href: Padrões HTML
Resumo Rápido
**Usar a tag `<a>` sem `href`** é permitido pelos **padrões HTML5**, mas só faz sentido quando combinado com elementos interativos adicionais. Para habilitar a ativação do link via teclado, adicione `tabindex="0"` e, para lidar com cliques do mouse – use `onclick`.
**Exemplo de Código**:
```html
<a onclick="surpresa();" tabindex="0">Aqui é onde a mágica começa</a>Esse elemento se comporta como um objeto interativo, respondendo a cliques e sendo totalmente navegável via teclado.
## Quando e Por Que Usar `<a>` Sem Navegação?
**A tag `<a>` sem `href`** normalmente atua como um **placeholder** para **eventos controlados por JavaScript**. É adequada para criar janelas modais ou menus suspensos. É importante enfatizar a **acessibilidade**: os elementos devem ser facilmente perceptíveis e utilizáveis através do **teclado e leitores de tela**.
### Aumentando o Dinamismo do `<a>`
Se a tag `<a>` precisa imitar o comportamento de um `<button>`, você pode adicionar **`role="button"`** e atribuir **ouvintes de eventos JavaScript**. Isso ajuda a destacar seu **papel semântico** e garante a **interatividade**.
### Acessibilidade para Usuários de Teclado
Considere aqueles que preferem trabalhar com o teclado! Torne a interação com o elemento amigável ao usuário adicionando:
- `tabindex="0"` para permitir que o elemento seja **focado**;
- Tratamento das teclas `Enter` e `Space` através de **ouvintes de eventos**;
- Você pode personalizar a aparência do `<a>` para parecer um elemento clicável usando **CSS**.
```css
a[role="button"] {
cursor: pointer; /* O cursor aparece como ponteiro ao passar por cima do elemento */
text-decoration: underline; /* O sublinhado adiciona semelhança visual a um link */
}Visualização
Pense na tag <a> como uma porta (🚪):
Porta (🚪) | Função
----------- | --------------------
Com uma **maçaneta** (🔗) | Abre um caminho (como `<a href="...">`)
Sem uma **maçaneta** (❓) | Apenas parte da parede (como `<a>` sem `href`)A tag <a> sem href não leva a lugar algum. Mas é possível “bater”?
<🚪> | Pode ser tocada, batida, mas não há passagem.
<🚪🔗> | Convida você a entrar em outro espaço!Criando Ancoragens Acessíveis e Semânticas
Otimização Semântica
Embora a tag <a> possa ser adaptada para funcionalidade de botão, é melhor usar <button> para ações interativas. Se for necessário usar <a>, atribua role="button" para que os usuários de tecnologias assistivas percebam corretamente sua funcionalidade.
Funcionalidade JavaScript
Atributos adicionais como data-toggle e data-target permitem que o JavaScript interaja com âncoras sem href. Garanta suporte para o atributo aria-expanded para que os leitores de tela relatem mudanças de visibilidade dos elementos.
ARIA para Acessibilidade
Ao incluir ícones dentro de uma âncora, adicione aria-hidden="true" para indicar seu papel decorativo. O atributo aria-label ajudará a descrever a ação para links que imitam botões.
<a role="button" onclick="fazerAlgo();" aria-label="Iniciar Ação" tabindex="0">
Iniciar <i class="fa fa-play-circle" aria-hidden="true"></i> <!-- Isto não é um botão real, apenas uma simulação! -->
</a>Atributos Não Padrão, Mas Implementáveis
Atributos como target, download, rel, hreflang, e type teoricamente não deveriam funcionar sem href. No entanto, podem operar sob controles JavaScript, o que pode levar a problemas de acessibilidade.
Recursos Úteis
<a>: O Elemento de Âncora | MDN — Uma fonte confiável para padrões de especificação da web.- Padrão HTML: O Elemento
a— Descrição abrangente das regras HTML5 para elementos<a>do WHATWG. - Tag HTML a — Exemplos práticos e guias para usar a tag
<a>. - Links e Hipertexto — Um guia detalhado sobre acessibilidade de links para
<a>. - Quando um Botão Não É um Botão? — Uma discussão sobre o uso de
<button>em vez de<a>. - Tabelas de Suporte HTML5 — Um recurso para verificar o suporte HTML5 em navegadores, no contexto de âncoras.