获得焦点前视觉隐藏

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.

Do not reach for display none or visibility hidden. Those remove the link from the accessibility tree, so no one can focus it.

The goal is a visually hidden state: invisible on screen, but fully present for keyboards and screen readers.

A common trick shrinks the link to one pixel and clips it. It stays in the DOM and focus order, just out of sight.

The magic is the focus state. When Tab lands on the link, your CSS restores its size and pulls it back into view.

Use focus, never hover. A keyboard user cannot hover, so a hover-only reveal leaves the link permanently invisible to them.

When revealed, give it a solid background and padding. It should look like an obvious button, not faint text the user might miss.

Do not strip the focus outline on the revealed link. Users need to see exactly where their focus has landed.

Often the hidden link sits offscreen with a negative top, then slides to top zero on focus. The slide makes the reveal feel deliberate.

This visually hidden pattern is so useful that most teams keep it as a shared utility class for any sr-only content.

Press Tab from a fresh load. The skip link should pop into view immediately. Tab away and it should vanish again. ✅

Which approach correctly hides a skip link until needed?

Hide the skip link with clipping, never display none, and reveal it on focus with a clear outline. Invisible until it is needed. 🎯