Oculto visualmente até receber foco
Oculte o link para quem usa o mouse e revele-o ao pressionar Tab.
Oculto visualmente até receber foco é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 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.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
The Design Tension
Skip links are vital, yet many teams worry they clutter the layout. The classic answer: hide it visually, but keep it ready for keyboard users.
Never display none
Do not reach for display none or visibility hidden. Those remove the link from the accessibility tree, so no one can focus it.
Visually Hidden, Still There
The goal is a visually hidden state: invisible on screen, but fully present for keyboards and screen readers.
The Clip Pattern
A common trick shrinks the link to one pixel and clips it. It stays in the DOM and focus order, just out of sight.
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }Reveal It on Focus
The magic is the focus state. When Tab lands on the link, your CSS restores its size and pulls it back into view.
.skip-link:focus { width: auto; height: auto; clip: auto; top: 0; }Why focus, Not hover
Use focus, never hover. A keyboard user cannot hover, so a hover-only reveal leaves the link permanently invisible to them.
Make It Clearly Visible
When revealed, give it a solid background and padding. It should look like an obvious button, not faint text the user might miss.
Keep the Focus Outline
Do not strip the focus outline on the revealed link. Users need to see exactly where their focus has landed.
Mind the Position Math
Often the hidden link sits offscreen with a negative top, then slides to top zero on focus. The slide makes the reveal feel deliberate.
A Reusable Utility
This visually hidden pattern is so useful that most teams keep it as a shared utility class for any sr-only content.
Test the Reveal
Press Tab from a fresh load. The skip link should pop into view immediately. Tab away and it should vanish again. ✅
Quick Check
Which approach correctly hides a skip link until needed?
Recap
Hide the skip link with clipping, never display none, and reveal it on focus with a clear outline. Invisible until it is needed. 🎯
Perguntas Frequentes
A aula “Oculto visualmente até receber foco” é grátis?
Sim — o texto completo de “Oculto visualmente até receber foco” é 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 “Oculto visualmente até receber foco”?
Oculte o link para quem usa o mouse e revele-o ao pressionar Tab. 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 3 de 4.
Quanto tempo leva a aula “Oculto visualmente até receber foco”?
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
- Por que existe o salto para o conteúdo principal
- Criando um link de salto que realmente funciona
- Oculto visualmente até receber foco
- Vários links de salto para páginas grandes