Novo Transforme visitantes em clientes. Saiba mais

The Link CookBook - Truques com Links na Web

Os links são um dos blocos de construção mais básicos, porém profundamente fundamentais e fundamentais da web. Clique em um link e você será movido para outra página ou será movido para outro local na mesma página. Aqui juntei umas dicas do bem básico até um pouco mais avançado sobre links em páginas Web, Emails e afins. Espero que você descubra algo novo hoje neste artigo. E se descobrir, compartilhe com um amigo.

Aplicado ao HTML

Um link básico 👕

<a href="https://google.com">Pagina Qualquer</a>
Esse é um link para um URL "totalmente qualificado" ou "absoluto".

Um link relativo 🔗

Você também pode criar um link "relativamente":
<!-- Útil na navegação, mas tenha cuidado com o conteúdo que pode viajar para outro lugar (ex. RSS) -->
<a href="/paginas/sobre.html">Sobre</a>
Isso pode ser útil, por exemplo, no desenvolvimento em que o nome do domínio provavelmente seja diferente do site de produção, mas você ainda deseja clicar nos links. URLs relativos são mais úteis para coisas como navegação, mas tenha cuidado ao usá-los em conteúdo - como postagens de blog - onde esse conteúdo possa ser lido fora do site, como em um aplicativo ou feed RSS.

Um link de Salto 👠

Os links também podem ser "links de hash" ou "links de salto" iniciando com um #:
<!-- Útil na navegação, mas tenha cuidado com o conteúdo que pode viajar para outro lugar (ex. RSS) -->
<a href="/paginas/sobre.html">Sobre</a>

Clicar nesse link "pulará" (rolar) para o primeiro elemento no DOM com um ID correspondente, como o elemento de seção acima 1.

É uma coisa bastante comum na UI/UX ver um link "Voltar ao topo" nos sites, principalmente onde importantes controles de navegação estão no topo, mas há bastante conteúdo para percorrer (ou navegar). Para criar um link de salto, vincule ao ID de um elemento que esteja na parte superior da página para onde faz sentido enviar o foco de volta.

1 🧙🏽‍♂️ Pequeno Truque: Usar um link de hash (por exemplo, #0) no desenvolvimento pode ser útil para que você possa clicar no link sem ser enviado de volta ao topo da página, como um clique em um link #. Mas cuidado, os links que não são vinculados a lugar algum nunca devem chegar à produção.

<a href="#topo-pagina">Volta ao Topo</a>

Às vezes, os links de salto também são usados para vincular a outros elementos âncora (<a>) que não possuem atributo href. Esses são chamados de links de "placeholder":

<a id="secao2"></a>
<h3>Seção 2</h3>

Existem considerações de acessibilidade, mas no geral são aceitáveis. 🤷‍♂️

Um Link Desativado 💤

Um link sem um atributo href é a única maneira prática de desativar um link. Por que desativar um link? Talvez seja um link que só se torne ativo após o login ou a inscrição.

a:not[href] {
  /* estilo css de um link "desativado" */
}

Quando um link não tem href, ele não tem função, foco ou evento do teclado. Isso é intencional. Você poderia pensar nisso como um <span>.

Você precisa do link para abrir em uma nova janela ou guia?

Você pode usar o atributo target para isso, mas é fortemente desencorajado.

<a href="https://google.com" target="_blank" rel="noopener noreferrer">
  Página de Busca
</a>

O bit que o faz funcionar é target="_blank", mas observe o atributo rel extra e os valores que o tornam mais seguro e rápido.

Abrir links em novas guias é uma importante discussão sobre UX. Eis aqui alguns conselhos:

👎 Não utilize:

  • Porque você ou seu cliente preferem pessoalmente.
  • Porque você está tentando aumentar a métrica do seu tempo no site.
  • Porque você distingue entre links internos e externos ou tipos de conteúdo.
  • Porque é a sua maneira de lidar com os truques de rolagem infinitos

👍 Utilize:

  • Porque um usuário está fazendo algo na página atual, como a reprodução ativa de mídia ou trabalho não salvo.
  • Você tem algum motivo técnico obscuro para o qual é forçado (mesmo assim, provavelmente ainda é a regra, não a exceção).

Precisa do link para acionar um download?

O atributo de download em um link instruirá o navegador a baixar o arquivo vinculado em vez de abri-lo na Página / Guia Atual. É um toque de UX agradável.
<a href="/arquivos/arquivo.pdf" download>Baixar PDF</a>

O atributo rel

Este atributo é para o relacionamento do link com o destino. O atributo rel também é comumente usado no elemento <link> (que não é usado para criar hiperlinks, mas para itens como CSS e pré-carregamento). Não estamos incluindo valores rel para o elemento <link> aqui, apenas ancore os links.

Vamos aos exemplos básicos:

<a href="/pagina/3" rel="next">Próximo</a>
<a href="/pagina/1" rel="prev">Anterior</a>

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

<a href="/topicos/" rel="directory">Todos os Tópicos</a>
  • rel="alternate": Versão alternativa do documento.

  • rel="author": Autor do documento.

  • rel="help": Um recurso para obter ajuda com o documento.

  • rel="license": Licença e informações legais.

  • rel="manifest": Documento de manifesto do aplicativo da Web (PWA).

  • rel="next": Próximo documento da série.

  • rel="prev": Documento anterior da série.

  • rel="search": Um documento destinado a realizar uma pesquisa no documento atual.

Também existem alguns atributos rel especificamente para informar os mecanismos de busca:

  • rel="sponsored": Marque os links que são anúncios ou canais pagos (geralmente chamados de links pagos) como patrocinados.

  • rel="ugc": Para conteúdo gerado pelo usuário não particularmente confiável, como comentários e postagens no fórum.

  • rel="nofollow": Diga ao mecanismo de pesquisa para ignorar isso e não associar este site ao local em que ele está vinculado.

E também alguns atributos rel que são mais focados na segurança:

  • rel="noopener": Impedir que uma nova guia use o recurso window.opener do JavaScript, que pode acessar a página que contém o link (seu site) para realizar ações maliciosas, como roubar informações ou compartilhar código infectado.Usar isso com target="_blank" geralmente é uma boa idéia.

  • rel="noreferrer": Impedir que outros sites ou serviços de rastreamento (por exemplo, Google Analytics) identifiquem sua página como a fonte do link clicado.

Você pode usar vários valores separados por espaço, se precisar (por exemplo, rel="noopener noreferrer").

E, finalmente, alguns atributos rel vêm do padrão de microformatos, como:

  • rel="directory": Indica que o destino do hiperlink é uma listagem de diretório que contém uma entrada para a página atual.

  • rel="tag": Indica que o destino desse hiperlink é uma "marca" designada pelo autor (ou palavra-chave / assunto) para a página atual.

  • rel="payment": Indica que o destino desse hiperlink fornece uma maneira de mostrar ou dar suporte à página atual.

  • rel="help": Declara que o recurso vinculado é um arquivo de ajuda ou uma FAQ do documento atual.

Função ARIA

A função padrão de um link é link, portanto, você não precisa definir:

<a role="link" href="/">Link</a>

Você só precisaria disso se estivesse falsificando um link, o que seria uma coisa estranha/rara de se fazer, e você teria que usar algum JavaScript além disso para fazer com que ele seguisse o link.

<span class="link" tabindex="0" role="link" data-href="/"> Link acessível falso criado usando uma span </span>

Olhando acima, você pode ver o quanto de trabalho extra está imitando um link, e isso é antes de considerar que é necessário clicar com o botão direito do mouse, não permite a abertura em uma nova guia, não funciona com o Windows High Contrast Mode e outro leitor modos e tecnologia assistiva. Muito mal!

Uma função ARIA útil para indicar a página atual, como:

<a href="/" aria-current="page">Início</a>
<a href="/contato">Contato</a>
<a href="/sobre">Sobre</a>

Você deve usar o atributo title?

Provavelmente não. Guarde isso para atribuir a um iframe um título curto e descritivo.

<a title="Eu não preciso estar aqui" href="/">
 Lista de Concertos
</a>

O title fornece um pop-up da interface do usuário acionado pelo cursor mostrando o texto que você escreveu. Você não pode estilizá-lo, e não é realmente tão acessível.

“Acionado-pelo-cursor” é a frase-chave aqui. É inutilizável em qualquer dispositivo apenas com toque. Se um link precisar de mais informações contextuais, forneça isso no conteúdo real ao redor do link ou use texto descritivo no próprio link (em vez de algo como "Clique Aqui").

Links somente de ícone

Se um link tiver apenas um ícone dentro dele, como:

<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>

Isso não é informação contextual suficiente sobre o link, principalmente por razões de acessibilidade, mas potencialmente para qualquer pessoa. Links com texto são quase sempre mais claros. Se você absolutamente não pode usar texto, pode usar um padrão como:

<a href="/">
  <!-- Oculta o ícone da tecnologia assistida -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Atua como um rótulo oculto da visualização -->
  <span class="visually-hidden">Texto útil do link</span>
</a>

visually-hidden é uma classe usada para ocultar visualmente o texto do rótulo com CSS:

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Ao contrário da aria-label, o texto visualmente oculto pode ser traduzido e funciona melhor nos modos de navegação especializados.

Links em torno de imagens

As imagens podem ser links se você as agrupar em um link. Não é necessário usar o texto alternativo para dizer que a imagem é um link, pois a tecnologia assistida já fará isso.

<a href="/comprar/filhotes/agora">
  <img src="/filhote.jpg" alt="Um filhote feliz">
</a>

Links em torno de pedaços maiores de conteúdo

Você pode linkar uma área inteira do conteúdo, como:

<a href="/artigo/">
  <div class="card">
    <h2>Título</h2>
    <img src="/..." alt="...">
    <p>Conteúdo</p>
   </div>
</a>

Mas é claro que existem implicações no UX. Por exemplo, pode ser mais difícil selecionar o texto, e todo o elemento precisa de um estilo bastante complexo para criar um foco claro e estados de foco. Também há implicações de acessibilidade, como o fato de o conteúdo de todo o cartão ser lido antes de ser anunciado como um link.

Aqui está um exemplo com duas abordagens. O primeiro envolve o card inteiro em um link. Isso é válido, mas lembre-se das implicações. O segundo possui um link dentro do título, e o link possui um pseudo-elemento que cobre todo o cartão. Isso também tem implicações (um pouco estranho para selecionar texto, por exemplo), mas talvez seja mais esperado para a tecnologia assistida.

O segundo exemplo também abre a possibilidade de incluir vários links. Você não pode aninhar links; portanto, as coisas ficam um pouco complicadas, se necessário. É possível, porém, criando os links individuais definidos acima do link de cobertura do card com o z-index.

Aplicado ao CSS

Considerações de estilo e CSS

Aqui está a aparência padrão de um link:

A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica para preencher os espaços de texto em publicações para testar e ajustar aspectos visuais antes de utilizar conteúdo real.

O estilo padrão do User-Agent de um link.

É provável que você mude o estilo dos seus links e também use CSS para fazer isso. Eu poderia deixar todos os meus links vermelhos em CSS fazendo:
a {
  color: red;
}
Às vezes, selecionar e estilizar todos os links em uma página é um pouco pesado, pois os links na navegação podem ser tratados de maneira totalmente diferente dos links no texto. Você sempre pode selecionar os escopos para segmentar links em áreas específicas, como:
/* Links de Navegação */
nav a { }

/* Links em artigos*/
article a { }

/* Links contidos em um elemento com uma classe "texto" */
.texto a { }
Ou selecione o link diretamente para estilizar.
.link {
  /* Para estilizar <a class="link" href="/"> */
}

a[aria-current="page"] {
  /* Você precisará aplicar esse atributo por conta própria, mas é um ótimo padrão para usar na navegação ativa. */
}

Estados do link

Links são elementos focáveis. Em outras palavras, eles podem ser selecionados usando a tecla Tab do teclado. Os links são talvez o elemento mais comum em que você projetar conscientemente os diferentes estados, incluindo um estado :focus.

  • :hover: Para estilizar quando um ponteiro do mouse está sobre o link.

  • :visited: Para estilizar quando o link foi acessado, o melhor que o navegador pode lembrar. Possui capacidade de estilo limitada devido à segurança.

  • :link: Para estilizar quando um link não foi visitado.

  • :active: Para estilizar quando o link é pressionado (por exemplo, o botão do mouse está pressionado ou o elemento está sendo tocado em uma tela de toque).

  • :focus: Muito importante! Os links devem sempre ter um estilo de foco. Se você optar por remover o contorno azul padrão que a maioria dos navegadores aplica, use também esse seletor para aplicar um estilo de foco visualmente óbvio.

Eles são encadeados como qualquer pseudo classe, então você pode fazer algo assim se for útil para o seu design / UX.

/* Estados focus e hover no mesmo parâmetro */
a:focus:hover { }

Você pode estilizar um link para parecer com um botão

Talvez um pouco da confusão entre links e botões seja assim:

Saiba Mais

Isso certamente parece um botão! Todo mundo chamaria isso de botão. Mesmo um sistema de design provavelmente chamaria isso de botão e talvez tenha uma classe como .button{}. Mas! Uma coisa em que você pode clicar dizendo "Saiba mais" é muito mais um link, não um botão. Tudo bem, é apenas mais um lembrete para usar o elemento semântico e funcionalmente correto.

Contraste da cor

Como geralmente denominamos links com uma cor distinta, é importante usar uma cor com contraste suficiente para facilitar a acessibilidade. Existe uma grande variedade de deficiências visuais (consulte a ferramenta WhoCanUse para simular combinações de cores com diferentes deficiências) e o alto contraste ajuda quase todas elas.

Talvez você defina uma cor azul para os links:

Contraste do Link

O link azul é #2196F3.

Embora isso possa parecer bom para você, é melhor usar ferramentas de teste para garantir que a cor tenha uma proporção suficientemente forte, de acordo com as diretrizes pesquisadas. Aqui, examinarei o Chrome DevTools e ele indicará que essa cor não é compatível, pois não tem contraste suficiente com a cor do plano de fundo.

Chrome Dev Tools

O Chrome DevTools está nos dizendo que essa cor do link não tem contraste suficiente

O contraste de cores é uma grande consideração nos links, não apenas porque geralmente são coloridos em uma cor única que precisa ser verificada, mas porque eles têm todos esses estados diferentes (hover, focus, active, visited) que também podem ter cores diferentes.

Combine isso com o fato de que o texto pode ser selecionado e você tenha muitos lugares para considerar o contraste.

Estilizando "tipos" de links

Podemos ser inteligentes em CSS com seletores de atributos e descobrir para que tipo de recurso um link está apontando, supondo que o valor href contenha informações úteis.
/* Estilize todos os links que incluem .pdf no final */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* Estilo de links que apontam para o Google */
a[href*="google.com"] {
  color: purple;
}

Estilos de Link para Impressão

O CSS possui uma "regra geral" para declarar estilos que só têm efeito na mídia impressa (por exemplo, impressão de uma página da web). Você pode incluí-los em qualquer CSS como este:

@media print {
  /* Para links no conteúdo, exiba visualmente o link */ 
  article a::after { 
    content: " (" attr(href) ")";
  }
}

Redefinindo estilos

Se você precisou remover todo o estilo de um link (ou realmente qualquer outro elemento), o CSS oferece uma maneira de remover todos os estilos usando a propriedade all.

.special-area a {
  all: unset;
  all: revert;
  
  /* Iniciando do zero */
  color: purple;
}

Você também pode remover estilos individuais com palavras-chave. (Novamente, isso não é realmente exclusivo dos links, mas é genericamente útil):

a {
  /* Pegue a cor do item pai mais próximo que o define */
  color: inherit;

  /* Limpe o estilo (fique preto) */
  color: initial;

  /* Volte para o estilo do User Agent (azul) */
  color: revert;
}

Aplicado ao Javascript

Digamos que você queira impedir que o clique de um link faça o que normalmente faz: acesse o link ou pule a página. Em JavaScript, você pode usar preventDefault para evitar pulos.

const jumpLinks = document.querySelectorAll("a[href^='#']");

jumpLinks.forEach(link => {
 link.addEventListener('click', event => {
    event.preventDefault();
    //Em vez disso, faça outra coisa, como lidar com o comportamento da navegação
  });
});

Esse tipo de coisa está no centro de como os "SPAs” (aplicativos de página única, ainda, Single Page Application) funcionam. Eles interceptam os cliques para que os navegadores não assumam o controle e manejem a navegação.

Os SPAs veem para onde você está tentando ir (em seu próprio site), carregam os dados de que precisam, substituem o que precisam na página e atualizam o URL. É muito trabalhoso replicar o que o navegador faz livremente, mas você pode fazer coisas como animar entre páginas.

Outra preocupação do JavaScript com os links é que, quando um link para outra página é clicado, a página é deixada e outra página é carregada. Isso pode ser problemático para algo como uma página que contém um formulário que o usuário está preenchendo, mas ainda não foi concluído. Se clicarem no link e deixarem a página, perderão o trabalho! Sua única oportunidade de impedir que o usuário saia é usando o evento beforeunload.

window.addEventListener("beforeunload", function(event) {
  // Lembre o usuário de salvar seu trabalho ou o que for.
});

Um link cujo comportamento padrão foi removido não anunciará o novo destino. Isso significa que uma pessoa que usa tecnologia assistida pode não saber onde foi parar. Você precisará fazer coisas como atualizar o título da página e voltar o foco para a parte superior do documento.

JavaScript frameworks

Em uma estrutura JavaScript, como React, às vezes você pode ver links criados a partir de algo como um componente <Link /> em vez de um elemento <a> nativo. O componente personalizado provavelmente cria um elemento <a> nativo, mas com funcionalidade extra, como ativar o roteador JavaScript e adicionar atributos como aria-current = "page" conforme necessário, o que é uma coisa boa!

Por fim, um link é um link. Uma estrutura JavaScript pode oferecer ou incentivar algum nível de abstração, mas você sempre pode usar links regulares.

Considerações de acessibilidade

Abordamos alguma acessibilidade nas seções acima (está tudo relacionado!), Mas aqui estão mais algumas coisas em que pensar.

  • Você não precisa de texto como "Link" ou "Ir para" no próprio texto do link. Tornar o texto significativo (“documentação” em vez de “click aqui”).

  • Os links já possuem uma função ARIA por padrão (role="link"), portanto não há necessidade de defini-la explicitamente.

  • Tente não usar o próprio URL como texto(<a href="/google.com">google.com</a> )

  • Os links geralmente são azuis e geralmente sublinhados e isso geralmente é bom.

  • Todas as imagens no conteúdo devem ter texto alternativo de qualquer maneira, mas duplamente quando a imagem é agrupada em um link e, caso contrário, não há texto.

Nomes acessíveis exclusivos

Algumas tecnologias assistivas podem criar listas de elementos interativos na página. Imagine um grupo de quatro cartões de artigos com "Leia mais", a lista de elementos interativos será como:

  • Leia Mais

  • Leia Mais

  • Leia Mais

  • Leia Mais

Não é muito útil. Você pode fazer uso dessa classe .visually-hidden que cobrimos para tornar os links mais parecidos com:

<a href="/artigo">Leia Mais
  <span class="visually-hidden">
      do artigo "Dançando com coelhos".
  <span> 
</a>

Agora, cada link é único e claro. Se o design puder suportá-lo, faça-o sem a classe visualmente oculta para remover a ambiguidade de todos.

Erik PerinErik Perin

Erik Perin

Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.

Nossa Plataforma

Tenha foco no que realmente interessa, seu negócio.
The IaaS Ground

Produtos
Conteúdo
Voltar ao Topo
© Oktopus 2012 - 2020 | Todos os Direitos Reservados
Cron Job Starts