• Success Criterion 2.4.3
  • Conformance level A

Skip Link Injected at a Point That Breaks the Tab Order

2.4.3 — Focus Order

Scenario

Setting

A webinar platform's registration form

What’s wrong

Skip-to content injected at odd points making subsequent order contradictory.

Example 

window.addEventListener('load', () => {
  const skipLink = document.createElement('a');
  skipLink.href = '#reg-form';
  skipLink.textContent = 'Skip to registration form';
  document.querySelector('.header-search').after(skipLink);
});

Why it matters

The skip link appears after the search box instead of first, so keyboard users must tab past several controls before reaching the shortcut meant to save them the trip.

How to test

Press Tab once on load: if a skip link injected at an odd DOM position makes the subsequent tab sequence contradictory, it fails.

How to fix

A skip link only helps when it's reachable with the very first Tab press.

<body>
  <a href="#reg-form" class="skip-link">Skip to registration form</a>
  <header>...</header>
</body>

Outcome

A keyboard user presses Tab once, hits the skip link, and lands directly in the registration form.

Who is affected

Keyboard users trying to bypass repeated navigation get no benefit because the skip link isn't the first stop.

Learn more

Related scenarios