• Success Criterion 3.2.3
  • Conformance level AA

Header Menu Items Reshuffled Differently on Different Sections

3.2.3 — Consistent Navigation

Scenario

Setting

A video-conferencing app's meeting controls

What’s wrong

Header menu items reshuffled per section (Products first here, third there) without user initiation.

Example 

<!-- Dashboard header -->
<header><a href="/meetings">Meetings</a><a href="/recordings">Recordings</a><a href="/settings">Settings</a></header>

<!-- In-meeting header -->
<header><a href="/settings">Settings</a><a href="/meetings">Meetings</a><a href="/recordings">Recordings</a></header>

Why it matters

A host who tabs three times to reach Settings on the dashboard reaches Recordings instead once they're in a live meeting, costing time during a call already in progress.

How to test

Compare the header menu item order across several pages: if items are reshuffled per section (e.g., 'Products' first here, third there) without the user requesting it, it fails.

How to fix

Render the header from one shared component so its item order can't drift between the dashboard and in-meeting views.

<!-- Same header markup reused on every screen -->
<header><a href="/meetings">Meetings</a><a href="/recordings">Recordings</a><a href="/settings">Settings</a></header>

Outcome

A host reaches Settings in the same three tab presses whether they're on the dashboard or mid-meeting.

Who is affected

Keyboard users switching between the dashboard and an active meeting rely on identical menu order to navigate quickly under time pressure.

Learn more

Related scenarios