Essa tal de internet é para todos mesmo? Parte 2: Onde foi que eu cliquei?
No primeiro texto desta série, conversamos sobre como o visual de um site pode esconder informações importantes. Hoje, o assunto é sobre como a gente se move na web. Se você acha que todo mundo usa a internet com um mouse ou deslizando o dedo na tela, prepare o seu chá. Precisamos falar sobre as barreiras que não se veem, mas se sentem.
Onde foi que eu cliquei?
Imagine que você está em um quarto escuro com uma lanterna. Você aponta para os móveis para saber onde está cada coisa, mas, de repente, a lâmpada da lanterna quebra. Você ainda sabe que os móveis estão lá, mas não tem mais o sinal visual de para onde está apontando.
Na internet, isso acontece quando um site remove o foco. O foco é aquele contorno que aparece em volta de botões e links quando apertamos a tecla Tab. Para quem não usa o mouse — seja por uma questão motora ou por preferência — esse contorno é a única lanterna disponível.
A solução: Nunca remova o sinal visual de foco sem colocar algo melhor no lugar. Uma abordagem inteligente é configurar o site para ativar esse destaque apenas quando a navegação acontece pelo teclado.
Para quem programa, o segredo é usar o seletor :focus-visible em vez do :focus comum. Veja como é simples:
/* Isso remove o contorno no clique do mouse,
mas mantém a "lanterna" ligada para quem usa o teclado */
button:focus-visible {
outline: 3px solid #ffcc00;
outline-offset: 4px;
}
button:focus:not(:focus-visible) {
outline: none;
}
O labirinto do "Ler mais"
Agora, pense que você está caminhando por um corredor de um shopping onde todas as lojas têm a mesma fachada e todas as placas acima delas dizem apenas "Entrar". Você não sabe se aquela porta leva à farmácia, à livraria ou à praça de alimentação. Ficou confuso?
Para quem utiliza ferramentas de navegação por voz ou leitores de tela, encontrar uma lista de links idênticos escritos apenas como "Ler mais", "Clique aqui" ou "Saiba mais" é exatamente como esse corredor sem identificação.
A solução: Seja específico. Se o design exigir um botão curto visualmente, é possível dar o nome correto à "placa da loja" usando o atributo
aria-label. Assim, o visual continua limpo, mas a acessibilidade fica impecável.
No código, o leitor de tela vai priorizar o que está no selo de acessibilidade:
<!-- Visualmente aparece apenas "Ler mais",
mas o leitor de tela dirá o título completo do post -->
<a href="/post-acessibilidade" aria-label="Ler mais sobre a Parte 2 da série de acessibilidade">
Ler mais
</a>
E você? Já se sentiu em um labirinto tentando navegar em algum site? Me conta aqui nos comentários.
