Foco visível: nunca oculte o contorno
Evite que os usuários se percam na página.
Foco visível: nunca oculte o contorno é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Onde estou agora?
Um usuário de teclado só consegue ver uma coisa por vez: qual controle está com foco. Esse marcador visível é chamado de indicador de foco. 👀
O navegador oferece um gratuitamente
Por padrão, o navegador desenha um contorno de foco ao redor do elemento ativo quando você usa Tab. É o marcador integrado de “você está aqui”.
O pecado mais comum de acessibilidade
Designers frequentemente não gostam do contorno e o removem. Essa única regra, outline none, cega instantaneamente os usuários de teclado. Nunca a publique sem substituição.
:focus { outline: none; } /* harmful on its own */Remova apenas se você substituir
Você pode remover o contorno padrão, mas somente se adicionar uma substituição clara. Nunca deixe um controle focado com exatamente a mesma aparência de um controle inativo.
button:focus { outline: 3px solid #1565C0; }Torne-o evidente
Um bom indicador é fácil de perceber: um contorno espesso, um anel ou uma mudança de cor marcante. O sutil é o inimigo aqui, não seu aliado.
focus-visible é mais inteligente
O seletor focus-visible exibe o anel para usuários de teclado, mas o oculta em simples cliques do mouse. Você obtém segurança sem poluição visual.
button:focus-visible { outline: 3px solid #1565C0; }O contraste também importa aqui
Um contorno que se mistura ao fundo não ajuda ninguém. O estilo de foco precisa ter contraste suficiente para se destacar na página.
Não recorte o anel
Tenha cuidado com overflow hidden em um elemento pai. Isso pode cortar o contorno de foco, fazendo com que a borda inferior desapareça silenciosamente.
offset acrescenta espaço
Use outline-offset para afastar o anel do elemento. Um pequeno espaço torna o indicador muito mais fácil de perceber.
a:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; }É um requisito da WCAG
Isso não é apenas acabamento. A WCAG exige um indicador de foco visível em todo elemento interativo, portanto ocultá-lo pode resultar em não conformidade.
Percorra seu próprio site com Tab
O teste mais rápido não custa nada: use Tab pela página. Se você perder o foco em algum momento, seu indicador precisa ser aprimorado.
Verificação rápida
Escolha a maneira mais segura de lidar com o estilo de foco.
Recapitulação: mantenha o foco visível
Nunca remova o anel de foco sem substituí-lo. Prefira focus-visible, forneça contraste e deslocamento fortes e teste você mesmo com Tab. ✅
Perguntas Frequentes
A aula “Foco visível: nunca oculte o contorno” é grátis?
Sim — o texto completo de “Foco visível: nunca oculte o contorno” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Foco visível: nunca oculte o contorno”?
Evite que os usuários se percam na página. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Foco visível: nunca oculte o contorno”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tab, Shift+Tab, Enter, Espaço: as teclas essenciais
- Foco visível: nunca oculte o contorno
- A ordem lógica de tabulação acompanha o conteúdo
- Identificando armadilhas de teclado