• Success Criterion 2.4.3
  • Conformance level A

Expanded Content That Never Receives Keyboard Focus

2.4.3 — Focus Order

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Focus not moved to revealed content (accordion/inline edit) when operation depends on sequence.

Example 

<button aria-label="Add note to order" onclick="showNoteField()">Note</button>
<!-- ...rest of menu items... -->
<div id="note-container" hidden>
  <label for="note">Note for restaurant</label>
  <textarea id="note"></textarea>
</div>

Why it matters

The revealed note field lives at the bottom of the DOM, so pressing Tab after clicking the icon skips straight to the next menu item.

How to test

Trigger content that reveals more content (accordion expand, inline edit): check whether focus moves to the newly revealed content when the interaction depends on continuing there.

How to fix

When revealed content isn't adjacent in the DOM, send focus to it explicitly rather than relying on natural tab flow.

function showNoteField() {
  const container = document.getElementById('note-container');
  container.hidden = false;
  document.getElementById('note').focus();
}

Outcome

A diner clicks the note icon and starts typing immediately, without losing their spot in the menu.

Who is affected

Keyboard users adding special instructions must hunt for a field that never appears next in their tab order.

Learn more

Related scenarios