• Success Criterion 1.3.2
  • Conformance level A

Tab Order Used as a Stand-In for the Real Reading Sequence

1.3.2 — Meaningful Sequence

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Tab order used as a proxy: sequence conveyed only by tabindex (keyboard-focus setting) while page code (DOM)/reading order contradicts it.

Example 

<label for="amount">Amount</label>
<input id="amount" tabindex="1">

<label for="recipient">Recipient</label>
<input id="recipient" tabindex="2">

Why it matters

A screen reader user reading straight through hears Recipient first, but a keyboard-only user tabbing hits Amount first, giving the two groups contradictory field orders.

How to test

Compare the visual reading order to the Tab order: if tabindex values create a sequence that doesn't match DOM/reading order, treating tab order as a proxy for sequence fails.

How to fix

Remove positive tabindex values and place fields in the document in the order they should be filled; default tab order then matches reading order.

<label for="recipient">Recipient</label>
<input id="recipient">

<label for="amount">Amount</label>
<input id="amount">

Outcome

Both a screen reader user and a keyboard-only user now fill in Recipient before Amount, in the same sequence.

Who is affected

Screen reader users navigating by reading and keyboard users navigating by Tab experience two different, conflicting field orders on the same form.

Learn more

Related scenarios