ACESSIBILIDADE ≠ OVERLAY · 37
Ligações acessíveis: saber para onde vai antes de clicar
📅 10 de novembro de 2026 · ⏱ 7 min de leitura
Uma ligação deve ajudar a decidir, não obrigar a adivinhar. O texto, o contexto e o comportamento determinam se uma pessoa se consegue orientar com leitor de ecrã, teclado, voz ou ampliação.
01. Quando todos os caminhos se chamam «aqui»
Imagine uma página de serviços com oito ligações chamadas «mais informações». Ao ver a página completa, talvez associe cada uma ao cartão que a rodeia. Mas quem ouve uma lista de ligações pode receber oito nomes iguais. Tem de voltar ao conteúdo, encontrar cada bloco e reconstruir a relação com o destino. Uma operação simples transforma-se numa pesquisa desnecessária.
O problema não afeta apenas pessoas cegas. Quem utiliza ampliação pode ver apenas uma parte do cartão; quem navega com teclado precisa de decidir se cada paragem interessa. Uma ligação descritiva reduz o esforço antes de a ativar. A pergunta útil é o que a pessoa consegue antecipar com a informação que tem realmente disponível, e não com a composição completa que o autor conhece.
02. Descreva o propósito, não uma ordem vazia
«Consultar os horários de atendimento» permite antecipar melhor o destino do que «clique aqui». «Descarregar o guia de inscrição» explica mais do que «descarregar». Não é necessário transformar cada ligação numa frase interminável: escolha as palavras que distinguem o recurso e evite repetir todo o parágrafo.
O texto deve corresponder ao conteúdo de destino. Se «Tarifas do serviço» abre uma página comercial sem tarifas, o nome não resolve a tarefa. Reveja também as ligações depois de atualizar documentos ou reorganizar páginas. Um nome correto pode deixar de o ser mesmo quando o URL continua a funcionar. A precisão editorial faz parte da acessibilidade e da manutenção diária; os nomes devem ser revistos juntamente com os recursos que descrevem.
03. Contexto válido e compreensão fora de contexto
As WCAG 2.2 distinguem compreender o propósito no contexto de uma exigência mais rigorosa: compreendê-lo apenas pelo nome. O critério 2.4.4, de nível A, permite combinar o texto da ligação com contexto determinável pelo software. Um parágrafo, um item de lista ou uma célula relacionados podem fornecer informação pertinente.
Assim, «ler mais» não é um incumprimento automático em todas as situações. Examine a associação real, não apenas a proximidade visual. Mesmo quando o contexto satisfaz o critério, um nome específico costuma facilitar listas de ligações e exploração rápida. Separe a avaliação de conformidade da decisão de oferecer uma experiência mais clara. Uma recomendação útil não deve transformar-se numa regra inventada, nem um cartão visualmente organizado prova uma associação programática.
04. O nome visível e o nome anunciado devem coincidir
O nome acessível de uma ligação pode resultar do texto, de uma imagem ou de um mecanismo como aria-label. Se a etiqueta visível diz «Contactar» mas o nome acessível é completamente diferente, quem usa controlo por voz pode ter dificuldade em ativar a ligação dizendo o que vê. O critério 2.5.3 exige que o nome contenha o texto da etiqueta visível quando aplicável.
A primeira opção costuma ser melhorar o texto visível para todas as pessoas. Evite acrescentar descrições ocultas extensas sem verificar o nome final. O atributo title também não deve ser o único lugar onde se explica o destino: o acesso varia entre dispositivos. Inspecione o nome calculado e ouça como é anunciado na interface real, incluindo repetições inesperadas.
05. Uma imagem com ligação também precisa de propósito
Se uma imagem for o único conteúdo de uma ligação, a alternativa textual deve transmitir a função dessa ligação. Num logótipo que leva ao início, interessa identificar a navegação, não descrever todas as curvas do desenho. Uma lupa com ligação não deve ficar com um nome de ficheiro como «icone-final-2.svg».
Quando imagem e texto pertencem à mesma ligação e o texto já explica o propósito, a imagem decorativa pode ter uma alternativa vazia para evitar repetições. Reveja cartões com imagem, título e botão para o mesmo recurso. Várias ligações consecutivas podem criar paragens redundantes. Procure uma solução coerente sem aninhar ligações nem retirar a semântica ou a interação nativa a um contentor inteiro.
06. Ligações e botões têm funções diferentes
Uma ligação navega para um recurso ou localização. Um botão executa uma ação, como abrir um painel ou enviar um formulário. Podem parecer semelhantes, mas o comportamento e as expectativas diferem. Utilize elementos nativos adequados à função; uma ligação sem destino real não é uma solução universal para todos os controlos.
Não substitua essa base por um div com um evento de clique e um papel improvisado. Teria também de resolver foco, ativação por teclado e outros comportamentos já disponibilizados pelo elemento nativo. Confirme que as ligações funcionam com Enter e os botões respondem à interação esperada. A tecnologia deve acompanhar a tarefa, sem obrigar a descobrir um comportamento diferente em cada componente.
07. Transferências e mudanças de contexto previsíveis
Se uma ligação conduz a um documento, identifique claramente o assunto. Acrescentar formato e, quando útil, tamanho ajuda a decidir se convém abri-lo num telemóvel ou numa ligação limitada. «Guia de inscrição, PDF» informa mais do que um endereço longo ou um ícone sem explicação.
Evite abrir novos separadores por hábito. Quando houver uma razão, avisar sobre esse comportamento ajuda a manter a orientação. Esta boa prática não equivale a afirmar que qualquer novo separador incumpre automaticamente as WCAG. Uma ligação clara também não torna acessível o ficheiro de destino. Um PDF sem estrutura continua a criar barreiras mesmo com um nome perfeito. Reveja o percurso completo, desde a escolha até à consulta do recurso.
08. Visibilidade, foco e espaço para ativar
As ligações num parágrafo devem ser identificáveis sem depender apenas da cor; o sublinhado é frequentemente uma solução clara e estável. Verifique o contraste e evite que os estados de visita ou foco tornem o texto ilegível. A interação deve ser reconhecível antes de passar o rato.
Percorra as ligações com Tab e Shift+Tab. O indicador de foco deve ser visível e o componente não deve ficar totalmente oculto por conteúdo criado pelo site ao receber foco; as WCAG 2.2 tratam esta última situação em 2.4.11. Reveja também o espaçamento e os requisitos aplicáveis ao tamanho dos alvos, considerando as exceções. Aumentar a área clicável não deve criar sobreposições que ativem outro destino por engano.
09. Teste a decisão antes de testar o clique
Escolha uma tarefa real: encontrar os horários ou chegar ao contacto do apoio. Leia os nomes das ligações sem ativar nenhuma e anote o destino esperado. Depois siga o percurso e compare a expectativa com o resultado. Repita com leitor de ecrã, lista de ligações, teclado e ampliação quando adequado.
As ferramentas automáticas podem detetar determinados nomes ausentes ou problemas de contraste, mas não decidem se «mais informações» promete o recurso certo ou se uma tradução conserva o sentido. Documente ambiguidades com a localização, o nome anunciado e o destino esperado. Não avalie todo o site através de uma única ligação: reveja menus, cartões, rodapé e conteúdo editorial, que normalmente resultam de componentes e decisões de publicação diferentes.
10. Corrija a origem e preserve a clareza
Em WordPress e Divi, reveja o texto do editor, o HTML e o nome acessível do resultado. Corrija o módulo partilhado quando muitos cartões repetirem o problema. Traduza os nomes e confirme o idioma de destino: uma etiqueta localizada ajuda pouco se o recurso muda inesperadamente de língua.
Um overlay não conhece sozinho a intenção editorial de cada ligação nem garante que um nome genérico descreve o recurso correto. Os ajustes visuais podem complementar o trabalho, mas não substituem essa decisão. Acrescente uma pergunta simples à revisão: consegue a pessoa escolher com conhecimento antes de ativar? A acessibilidade melhora quando sabe para onde vai, encontra o conteúdo esperado e consegue continuar com autonomia.