The skip link must become visible on focus
Aliases: visually hidden skip · appear on focus · skip link reveal
What it is
A skip entry may stay hidden while unfocused so it does not fight the visual layout. The moment it is the focused control, it must appear as a visible control. An invisible skip link can be spoken by a screen reader and still fail sighted keyboard users — they do not know they are sitting on something Enter will fire, or where it would go.
Visible-on-focus is not decoration. It is the condition under which this shortcut exists for keyboard users who are not running a reader.
Why it happens
The usual implementation parks the link off-viewport or paints it in the background colour, then pulls it back and adds contrast on :focus. That only works if the focus style actually undoes the hiding rules. display: none keeps it out of the tab sequence entirely. visibility: hidden that is not reversed on focus leaves the caret on a node that is still invisible. A global outline: none can slide the link into the viewport and still leave no cue that it is the current item.
A second failure: it appears, but contrast is poor, or a sticky header covers it. Technically “shown”, sitting in an 8 px sliver or under the logo, is still not visible. Low-vision and magnifier users are stricter here: the entry must occupy a recognisable patch in the current zoom window, not flash at the top of the screen.
Studying it
Tab once from the address bar and screenshot: does the link appear, is it unclipped, is text-to-background contrast readable, is it covered by a fixed bar. Repeat in dark theme, high-contrast mode, and 200% zoom — hide/reveal is often tuned only on the default light theme.
Contrast: a reader speaking the link does not prove a sighted keyboard user can use it. Log the two populations separately.
Where it stops holding
A skip entry that is always visible (never hidden) satisfies this leaf; it only costs a little layout. On mobile with no Tab focus the hiding strategy never fires — re-test with a keyboard attached. If animation slides the link in from off-screen, it must be readable on the focused frame; do not let someone hit Enter mid-transition. Copy grows in other languages; a pixel-fixed reveal clips. Size the layout for the longest string, do not assume Chinese or English width.
Applying it
- Hide while unfocused if needed. On focus, move into the viewport, restore contrast, and draw a focus indicator — all three together.
- Do not hide the skip link with
display: none. Use off-screen or equivalent, and reverse it on:focus/:focus-visible. - How to check: Tab once. The entry must be fully visible and not under the header. Hitting Enter while still unable to see it does not pass this leaf.