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

Dialog That Opens Far From the Button That Triggered It

2.4.3 — Focus Order

Scenario

Setting

A ticket marketplace's seat-selection map

What’s wrong

A dialog or menu opens far away in the tab order from the button that opened it — keyboard users tab onward and never find it.

Example 

<button id="seatA12">Select Seat A12</button>
<!-- ...200 more seat buttons... -->
<footer>
  <div id="seat-dialog" role="dialog" hidden>
    <h2>Confirm Seat A12</h2>
    <button>Confirm</button>
  </div>
</footer>

Why it matters

A keyboard user who opens the dialog keeps tabbing through 200 remaining seat buttons before ever reaching the confirmation dialog.

How to test

Open a dialog/menu and immediately press Tab: if it lands somewhere else in the page instead of inside the dialog (dialog markup sits far from its trigger in the DOM), it fails.

How to fix

DOM position matters less than explicit focus management; always send focus into the opened dialog.

function openSeatDialog(seatId) {
  const dialog = document.getElementById('seat-dialog');
  dialog.hidden = false;
  dialog.querySelector('h2').focus();
}

Outcome

A user presses Enter on a seat and lands immediately in the confirmation dialog, no extra tabbing needed.

Who is affected

Keyboard users selecting seats can lose track of the dialog and abandon the booking, thinking nothing happened.

Learn more

Related scenarios