Visually Hidden Until Focused
Hide the link for mouse users, reveal it on Tab.
Visually Hidden Until Focused is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. 🎯
Frequently asked questions
Is the “Visually Hidden Until Focused” lesson free?
Yes — the full text of “Visually Hidden Until Focused” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Visually Hidden Until Focused”?
Hide the link for mouse users, reveal it on Tab. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Visually Hidden Until Focused” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Why Skip to Main Content Exists
- Building a Skip Link That Actually Works
- Visually Hidden Until Focused
- Multiple Bypass Links for Big Pages