Card de artigo com um link só: menos Tab para a mesma informação

Vinte cards na home, cada um com capa clicável, título clicável, um "leia mais" no rodapé e a categoria. São oitenta paradas de Tab entre o menu e o rodapé, e o leitor de tela anuncia o mesmo destino três vezes por artigo. A resposta curta: cada card tem um link para o artigo, e ele fica no título. A capa sai do link ou recebe texto alternativo vazio, o resumo é texto comum e só a categoria pode ser um segundo link, porque leva a outro lugar. Se você quer o card inteiro clicável para quem usa mouse, isso se resolve com CSS, sem criar links novos.

Com essa troca, a mesma home cai de oitenta para quarenta paradas, ou vinte se a categoria sair do card. Ninguém perde informação: o título continua nomeando o destino, a capa continua bonita e o resumo continua ajudando a escolher.

Por que três links iguais atrapalham

Quem usa teclado anda pela página com Tab, um elemento focável por vez. Cada link é uma parada. Quando o card tem três links para o mesmo endereço, a pessoa aperta Tab três vezes para passar de um artigo ao próximo e não ganha nada nas duas paradas extras.

Leitores de tela têm atalhos que listam todos os links da página. Nessa lista, cada link aparece fora do contexto do card. Um card com capa linkada e "leia mais" vira algo como "Backup de MySQL que restaura", "Backup de MySQL que restaura" (o alt da capa repetindo o título), "Leia mais". Multiplique por vinte e a lista tem vinte "Leia mais" idênticos, que não dizem para onde vão.

Há também quem controla o computador por voz. A pessoa diz o texto do link para clicar. Se vinte links se chamam "Leia mais", o software precisa perguntar qual deles. Com o título como link, basta dizer o título.

Como montar o card com um link só

1. Use o título como link. Ele já nomeia o destino, é o texto que a pessoa procura e faz sentido fora de contexto. Coloque o link dentro de um cabeçalho (h2 ou h3, conforme a hierarquia da página), para que a navegação por cabeçalhos também chegue nele.
2. Tire a capa do link. Se o título já diz tudo, a imagem é decorativa nesse contexto e recebe alt="". O leitor de tela pula. O critério completo está em texto alternativo que não repete o título.
3. Deixe o resumo como texto. É ele que faz a pessoa escolher. Não envolva o parágrafo num link: um link de cinquenta palavras é lido inteiro na lista de links.
4. Apague o "leia mais". Se o design pede uma seta ou um rótulo visual, ele fica como texto decorativo, sem ser link, marcado com aria-hidden="true".
5. Mantenha a categoria como segundo link, se ela existir. Ela leva à lista da categoria, que é outro destino. Destino diferente justifica parada diferente.
6. Estique a área clicável com CSS. Um pseudo-elemento do link do título cobre o card inteiro. O mouse clica em qualquer ponto e o teclado continua com uma parada só.

O HTML do card

<article class="card">
  <img src="/capas/backup-mysql.webp" alt="" width="640" height="360">
  <h3 class="card-titulo">
    <a href="/blog/backup-de-mysql-que-restaura">Backup de MySQL que você consegue restaurar</a>
  </h3>
  <p>Gere o dump, teste a restauração num banco descartável e saiba quanto tempo ela leva antes de precisar dela.</p>
  <p class="card-meta">
    <a href="/categoria/programacao">Programação</a> · 12 min de leitura
  </p>
</article>

O CSS que deixa o card inteiro clicável

.card {
  position: relative;
}

.card-titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-meta a {
  position: relative;
  z-index: 1;
}

.card:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

O ::after do link do título ocupa o card inteiro, porque o card é o ancestral posicionado mais próximo. Clicar na capa ou no resumo abre o artigo. O link da categoria recebe position: relative e z-index para ficar por cima da camada esticada e continuar clicável. O :focus-within desenha o contorno no card quando o título recebe foco, para quem usa teclado ver qual artigo está selecionado.

Um efeito colateral: selecionar o texto do resumo com o mouse fica difícil, porque a camada do link está por cima. Para a maioria das listas de artigos isso é aceitável. Se o resumo precisar ser copiável, deixe só o título e a capa clicáveis.

O exemplo da home com vinte artigos

Antes: vinte cards, cada um com capa linkada (alt igual ao título), título linkado, "leia mais" e categoria. São 80 paradas de Tab entre o menu e o rodapé. Na lista de links do leitor de tela, 20 "Leia mais" e 40 títulos repetidos em pares.

Depois: título linkado e categoria. São 40 paradas, metade do caminho, e cada nome na lista de links diz claramente para onde vai. Se a categoria sair do card porque já aparece no menu, cai para 20. Nenhuma informação sumiu da tela.

O mesmo vale para listas de produtos, resultados de busca e vagas. Onde houver uma grade de itens que levam a uma página de detalhe, o raciocínio é igual. A exceção são ações diferentes dentro do card, como "adicionar ao carrinho" ou "favoritar": isso é botão, não link, e merece a própria parada. A diferença entre os dois está em botão faz ação, link vai para um lugar.

Quando o "leia mais" não pode sair

Às vezes o CMS ou o design exige um link de texto no fim do card, e o título não pode ser link. Nesse caso o link precisa de um nome que funcione sozinho. Inclua o título no texto do link, com a parte extra escondida visualmente por uma classe de texto só para leitor de tela, ou use aria-label com "Leia mais: " seguido do título. Quando usar aria-label, o texto visível precisa estar contido nele, senão o comando de voz com o que a pessoa enxerga não encontra o link.

Ainda assim, isso é segunda opção. Um título que é link resolve tudo de uma vez e não depende de um texto escondido que alguém pode apagar sem perceber na próxima revisão do template. Sobre nomes de link em geral, veja link com o nome do destino.

Erros comuns

• Envolver o card inteiro num <a>. Vira um link só, mas o leitor de tela lê título, resumo, categoria e data como nome do link, tudo de uma vez. E o link da categoria fica aninhado dentro de outro link, o que o HTML não permite.
• Capa linkada com alt igual ao título. A pessoa ouve o título duas vezes seguidas e aperta Tab uma vez a mais por card.
• "Leia mais" sem contexto. Na lista de links, vinte entradas idênticas. No controle por voz, ambiguidade a cada comando.
• Capa clicável e título sem link. Quem navega por cabeçalhos encontra o título, mas não consegue ativá-lo e precisa voltar para a imagem.
• Remover o contorno de foco para o card ficar limpo. Com a área esticada, quem usa teclado não sabe em qual card está. O :focus-within resolve sem poluir.
• Camada esticada por cima de botões. Se o card tem botão de favoritar e o z-index ficou de fora, o clique no botão abre o artigo.

Checklist

• Cada card tem exatamente um link para o artigo, no título.
• A capa está fora do link ou tem alt="" quando o título já nomeia o artigo.
• Não existe "leia mais" como link sem o título no nome acessível.
• O resumo é texto comum, visível, sem link.
• Links adicionais (categoria, autor) levam a destinos diferentes do artigo.
• O card mostra foco visível quando o título está focado.
• Botões e links secundários dentro do card continuam clicáveis por cima da área esticada.
• Na lista de links do leitor de tela, nenhum texto se repete sem necessidade.

Abra a sua lista de artigos, clique na barra de endereço e vá apertando Tab: quantas paradas separam o título de um artigo do título do próximo? Se forem mais de duas, há link repetido no card.