Links

Os links são uma parte importante de qualquer site. Eles permitem que os usuários naveguem para outras páginas ou recursos. Os exemplos a seguir demonstram a diferença entre um link criado corretamente e alternativas não acessíveis e como elas afetam a experiência do usuário.

Span com evento de clique

Comportamento
  • Precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
Exemplo: Página Inicial

Span com evento de clique e tab index

Comportamento
  • Precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
  • Possui um indicador de foco visível
Exemplo: Página Inicial

Span com evento de clique, tab index e handler de clique do teclado

Comportamento
  • Precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
  • Possui um indicador de foco visível
  • Pode ser ativado usando a tecla Enter, mas requer um handler de clique do teclado manual
Exemplo: Página Inicial

Span com evento de clique, tab index, handler de clique do teclado e função (role) de "link"

Comportamento
  • Precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
  • Possui um indicador de foco visível
  • Pode ser ativado usando a tecla Enter, mas requer um handler de clique do teclado manual
  • É identificado como um link por leitores de tela
Exemplo: Página Inicial

Botão com função (role) de "link"

Comportamento
  • Precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
  • Possui um indicador de foco visível por padrão
  • Pode ser ativado usando as teclas Enter ou Espaço (não padrão para links) sem um handler de clique do teclado manual
  • É identificado como um link por leitores de tela
Exemplo:

Link correto

Comportamento
  • Não precisa de JavaScript para funcionar
  • Clicável com um mouse, dedo ou dispositivo de apontamento
  • Possui um indicador de foco visível por padrão
  • Pode ser ativado usando a tecla Enter sem a necessidade de um handler de clique do teclado manual
  • É identificado como um link por leitores de tela
  • Permite que determinados navegadores exibam o URL de destino
  • Ativa o menu contextual ao clicar com o botão direito do mouse com recursos como abrir em uma nova janela ou guia
Exemplo: Página Inicial