• Success Criterion 2.4.3
  • Conformance level A

Sticky Element Receiving Focus at the Wrong Point in the Flow

2.4.3 — Focus Order

Scenario

Setting

A project-management tool's task board

What’s wrong

Sticky elements receiving focus at wrong point relative to reading flow when operation depends on it.

Example 

<main>
  <button class="sticky-add" style="position:fixed;bottom:16px;right:16px;">
    Add task
  </button>
  <div class="board-columns">...</div>
</main>

Why it matters

A user reviewing the Kanban board's columns in order hits Add task first, before any column content, breaking the flow they expect.

How to test

Tab through a page with a sticky element (header/sidebar): check that its tab-stop position matches its logical place in the reading flow.

How to fix

position:fixed only affects rendering; place the element in source order where it makes sense to tab to.

<main>
  <div class="board-columns">...</div>
  <button class="sticky-add" style="position:fixed;bottom:16px;right:16px;">
    Add task
  </button>
</main>

Outcome

A user tabs through each board column first, then reaches Add task at a logical point afterward.

Who is affected

Keyboard users following the board's logical column order get interrupted by an out-of-place sticky control.

Learn more

Related scenarios