• Success Criterion 2.4.1
  • Conformance level A

Single-Page App That Loses Its Skip Link After Navigation

2.4.1 — Bypass Blocks

Scenario

Setting

A subscription box service's account settings

What’s wrong

single-page app route changes rebuilding the page without any bypass because the "skip" only existed on first load.

Example 

router.push("/settings/notifications");
// skip link markup only existed in the original server-rendered HTML

Why it matters

A user navigating between settings tabs in the single-page app loses the skip link after the very first page load.

How to test

Navigate within a single-page app to a new view: check whether the skip link (present on first load) still works or was never rebuilt for the new view.

How to fix

Keep the skip link in the persistent app shell so it survives every client-side route change.

<div id="app-shell">
  <a class="skip-link" href="#route-content">Skip to content</a>
  <div id="route-content">...</div>
</div>

Outcome

A user still finds the skip link working no matter how many settings tabs they switch between.

Who is affected

Keyboard users get a bypass mechanism only once per visit, then must tab through the full nav on every later view.

Learn more

Related scenarios