• Success Criterion 2.4.3
  • Conformance level A
  • W3C reference F44

Tab Order That Jumps Around the Page Illogically

2.4.3 — Focus Order

Scenario

Setting

A news outlet's article page

What’s wrong

tabindex (keyboard-focus setting) values force a tab order that jumps around illogically, so keyboard users move through the page in a confusing sequence.

Example 

<a href="#comments" tabindex="3">Jump to comments</a>
<h1 tabindex="1">Senate Passes New Budget Bill</h1>
<div class="byline" tabindex="2">By Jane Alvarez</div>
<article tabindex="5">...full story text...</article>
<aside class="related" tabindex="4">Related: Budget Timeline</aside>

Why it matters

A keyboard reader tabs from the headline to the related-articles box before reaching the story body, breaking the article's flow.

How to test

Inspect the DOM for positive tabindex values (tabindex="1", "2", etc.): these override natural order and often create an illogical sequence — check by tabbing through.

How to fix

Positive tabindex values create a separate, brittle order that fights the DOM; use 0 or omit it.

<h1>Senate Passes New Budget Bill</h1>
<div class="byline">By Jane Alvarez</div>
<article>...full story text...</article>
<aside class="related">Related: Budget Timeline</aside>
<a href="#comments">Jump to comments</a>

Outcome

A reader tabs straight from the headline into the story, then on to related links, in natural order.

Who is affected

Keyboard-only readers and screen reader users following tab order lose the article's logical reading sequence.

Learn more

Related scenarios