Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
Por que é que a borda de foco do teclado numa página Web deve ser visível?
A borda de foco do teclado deve ser visível, porque os utilizadores de teclado de outra forma guiam às cegas: Sem uma marcação visível — normalmente um contorno colorido à volta do elemento ativo — não é claro qual elemento está atualmente selecionado e o que a tecla Enter desencadeará em seguida. Muitos desenhadores removem este contorno por razões estéticas e bloqueiam assim os utilizadores de teclado. O critério WCAG 2.4.7 exige uma indicação de foco visível.
A borda de foco é o apontador do rato do teclado
Os utilizadores de rato veem sempre onde está o seu apontador. Os utilizadores de teclado têm para isso a borda de foco: Ela move-se com cada pressão da tecla de tabulação para o próximo elemento e mostra o que a tecla Enter acionaria. Se esta borda desaparecer, a operação torna-se um jogo de adivinhação — como usar o rato com um apontador invisível. A razão mais comum é uma única linha nas instruções de estilo que desliga o contorno padrão do navegador, porque foi considerado perturbador. A solução correta nunca é remover, mas desenhar: um contorno na cor da sua empresa, forte o suficiente para sobressair em qualquer fundo.
Assim o serviço de verificação mede a visibilidade de foco por comparação pixel a pixel
O serviço de verificação fotografa cada elemento de controlo testado duas vezes: uma sem foco, uma com foco. Em seguida, compara ambas as fotos pixel a pixel. Se o foco mudar menos de 0,2 por cento dos pixels no ambiente do elemento, a indicação de foco é praticamente invisível — o critério é considerado violado e o relatório nomeia o elemento afetado com uma fotografia de prova. Ambientes agitados, por exemplo por animações, são reconhecidos por uma comparação prévia de duas fotos sem foco e esses elementos são excluídos da avaliação. Além disso, o relatório assinala se as instruções de estilo desligam indiscriminadamente as bordas de foco.
Beispiele
Fokusrahmen entfernt
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none macht die Tastaturbedienung blind. :focus-visible zeigt den Rahmen nur bei Tastatur, nicht beim Mausklick.
- Navegue pela sua página inicial e observe: Em cada parada, é claramente reconhecível qual elemento está atualmente selecionado?
- Peça à sua agência para remover todas as regras que desligam o contorno de foco indiscriminadamente.
- Deixe desenhar uma borda de foco na cor da sua empresa — forte o suficiente para fundo claro e escuro.
- Verifique o foco também em imagens e áreas coloridas — um contorno fino cinzento desaparece depressa ali.