Curso de CSS / Estados de links e foco visível do teclado

Estilize os estados de link com pseudo-classes como :link, :visited, :hover e :focus-visible, mantendo os links reconhecíveis. Usuários de teclado precisam de um indicador de foco visível, e apenas o estilo de hover não pode comunicar todos os estados interativos.

Torne os links reconhecíveis

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

O link é criado com um elemento a contendo href. Apenas colorir o texto de azul não o torna um link real. Sublinhá-lo também informa aos leitores que têm dificuldade em distinguir cores quais partes podem ser ativadas. text-underline-offset ajusta o espaçamento entre letras e sublinhados. Aqui, em é baseado no tamanho da fonte do link.

Use um nome que descreva a conexão, como "Informações para Visitantes", em vez de um destino desconhecido, como "Clique". Antes de fazer um link comum parecer um botão, você precisa distinguir se é navegação ou ação. Links são adequados para elementos que levam a outro documento, e botões geralmente são adequados para elementos que executam ações na tela atual.

Compare os estados do link e a ordem no código

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Um link pode corresponder a vários estados ao mesmo tempo: um link visitado sob o ponteiro corresponde tanto a :visited quanto a :hover. Com especificidade igual e demais condições de cascata iguais, a declaração posterior ganha para a mesma propriedade. A ordem link → visited → hover → active torna as cores de hover e pressionado observáveis, seja a página de destino visitada ou não. Veja Combinadores e pseudoclasses CSS.

Esta ordem não supera todas as regras. Se você tiver seletores mais específicos ou outras condições de cascata, os resultados serão diferentes. Se a cor não mudar, verifique qual declaração de cor está sendo aplicada nas ferramentas de desenvolvedor. :active não representa permanentemente a página atual de um menu. Se você precisar exibir o menu da página atual, considere uma classe separada ou exibição semântica, como aria-current.

Mantenha o foco do teclado visível

a:focus-visible {
  outline: 3px solid #e58c1f;
  outline-offset: 3px;
}

Foco refere-se ao objeto que receberá a entrada do teclado. Se a localização atual não estiver visível ao navegar para um link com Tab, é difícil para o usuário saber onde pressionar Enter. :focus-visible se aplica em situações onde o navegador determina que exibir o foco é necessário. Geralmente, aparece em movimentos de teclado, mas nem todas as situações de clique/entrada são simplesmente divididas em dois tipos. Para comparar o foco de links com estados de campos de entrada, consulte Estados de formulários: foco, validação, disabled e readonly.

outline desenha o contorno de foco e outline-offset o separa do elemento. Não remova o indicador padrão com outline: none a menos que você forneça uma substituição adequada. Este exemplo mantém tanto o sublinhado do link quanto um contorno de foco visível. Veja MDN: :focus-visible.

Crie o exemplo de dois arquivos

Crie links.html e visit.html na mesma pasta. Salve o primeiro código como links.html e o próximo código como visit.html em UTF-8. O primeiro link leva você ao arquivo separado real, e o segundo link leva ao título de horário de funcionamento dentro da página atual.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states exercise</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden visitor information</h1>
    <nav aria-label="Instruction link"><ul>
      <li><a href="visit.html">Visitor information on a separate page</a></li>
      <li><a href="#hours">Opening hours on this page</a></li>
    </ul></nav>
    <h2 id="hours">Opening hours</h2>
    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>
    <p>Hover over the links or press Tab to check their colors and outlines.</p>
  </main>
</body>
</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

Teste os links com mouse e teclado

1. Abra links.html e passe o cursor sobre o primeiro link. Verifique se ele fica vermelho. Se você segurar o botão do mouse, verá uma cor vermelho escuro. Como a página se move no momento em que você o solta, a cor ativa não permanece após o clique.
2. Abra o primeiro link e retorne usando o botão Voltar do navegador. Mova o ponteiro para fora do link e verifique a cor de visitado. Os resultados podem variar em novos perfis, janelas privadas ou histórico limpo, e endereços já presentes no histórico podem aparecer como visitados desde o início.
3. Coloque o ponteiro fora do link e pressione Tab até o primeiro link. Certifique-se de que o contorno laranja apareça, depois pressione Tab novamente para o próximo link. Shift+Tab move na ordem inversa.
4. Com foco no primeiro link, pressione Enter. Certifique-se de que visit.html seja aberto. Quando você retornar, ative o segundo link com Enter e ele deve levá-lo ao título Opening hours (horário de funcionamento).

A exibição de visitados possui restrições de privacidade. Algumas propriedades de cor, como color, podem ser usados, mas tamanho, imagem, etc., não podem ser alterados livremente para determinar se uma visita ocorreu. Para proteger a privacidade, getComputedStyle() devolve a cor do estado não visitado, mesmo quando o navegador mostra a cor de visitado. Portanto, esse resultado não permite deduzir o histórico de navegação. Restrições detalhadas são descritas em :visited em documentação da MDN sobre :visited e privacidade .

Diagnostique alterações de estado ausentes

• Se o link não abrir o destino, verifique o nome do arquivo do href e a localização do visit.html. Primeiro, verifique se você colocou ambos os arquivos na mesma pasta.
• Se você só vê a cor de hover em vez da cor de visita, mova o ponteiro para fora do link. Se o hover estiver forçadamente ativado nas ferramentas de desenvolvedor, desligue-o.
• Se a navegação pelo teclado não funcionar, verifique se é um link real com um href. As configurações de navegação por teclado do seu navegador/sistema operacional também podem ter um efeito.
• Quando a linha de foco é cortada, verifique o overflow do elemento pai e o espaço ao redor. Em toque móvel, o hover pode se comportar de forma diferente do desktop, então informações essenciais não são mostradas apenas no hover.

Depois de terminar de praticar a mudança da ordem das regras, retorne-as para sua ordem original. CSS que foi temporariamente modificado nas ferramentas de desenvolvedor retornará ao valor salvo no arquivo quando você atualizar a página, mas o histórico de navegação não é redefinido apenas ao atualizar.