• Success Criterion 2.4.1
  • Conformance level A

Skip Link That’s Never Visible, Even on Keyboard Focus

2.4.1 — Bypass Blocks

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Skip link permanently invisible and never revealed on focus (also its own keyboard-visibility problem).

Example 

.skip-link {
  position: absolute;
  left: -9999px;
}
/* no :focus rule defined */

Why it matters

A sighted keyboard user tabbing through the spreadsheet toolbar can't tell a skip link exists or where focus currently sits.

How to test

Press Tab once on page load and watch for the skip link to appear: if it's permanently invisible (never shown even on focus), it fails.

How to fix

Always pair an off-screen skip link with a :focus rule that brings it back into view.

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; position: fixed; }

Outcome

Tabbing once, a user sees the skip link appear and jumps straight past the toolbar.

Who is affected

Sighted keyboard users lose track of focus entirely since the skip link never becomes visible when tabbed to.

Learn more

Related scenarios