Focus Order ensures that when users navigate a page using the keyboard, focus moves through interactive elements in a logical and meaningful sequence.
When focus jumps unpredictably or skips around the page, users can lose context, misunderstand relationships between elements, or be unable to complete tasks.
WCAG Success Criterion
2.4.3 Focus Order (Level A)
If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Why This Matters
Keyboard users experience a page with one focused element at a time. If focus moves in an unexpected order:
- Users may not understand how content is grouped
- Form fields may feel disconnected from their labels or instructions
- Users may activate controls out of context
- Navigation may feel random or broken
This is especially disorienting for users who can only see a small portion of the page at once, such as screen magnifier users.
Who This Helps
This criterion primarily supports:
- Keyboard-only users
- Users with mobility impairments
- Screen reader users
- Screen magnifier users
- Users with cognitive or learning disabilities
Any user who relies on sequential navigation benefits from a predictable focus order.
What Focus Order Means
Focus order refers to the sequence in which elements receive keyboard focus when users navigate forward or backwards.
Typically:
- Tab moves focus forward
- Shift + Tab moves focus backwards
Focus order is not about which elements are focusable. It is about the order in which focus moves between them.
Intent of the Criterion
This success criterion intends to ensure that keyboard navigation preserves:
- Meaning
- Relationships
- Operability
Users should encounter interactive elements in an order that makes sense for completing tasks and understanding content. There may be more than one valid focus order for a page. Any order that preserves meaning and allows correct operation is acceptable.
Focus Order and the DOM
By default, focus follows the order of elements in the document structure.
When authors do not modify focus behaviour:
- Focus order matches the DOM order
- Keyboard navigation is predictable
Focus order is commonly disrupted when:
- Visual layout is changed using CSS without considering the DOM order
tabindexis used incorrectly- Focus is moved programmatically without clear logic
Focus Order vs Visual Order
Focus order does not have to exactly match the visual layout. What matters is that the order:
- Feels logical
- Preserves relationships
- Does not confuse users
Example
In a two-column layout, focus may move:
- Down the left column first, then the right
- Or through one logical group, then another
Either approach can pass, as long as meaning and operation are preserved. As a best practice, the focus order should usually align with the reading order implied by the visual layout.
Focus Order vs Reading Order
Different users experience order differently:
- Screen reader users follow programmatic reading order
- Sighted keyboard users follow visual context plus focus movement
Focus order does not need to match reading order exactly, but it must make sense to both groups.
When focus jumps between unrelated areas of the page, one or both groups may become disoriented.
Acceptable Non-Sequential Navigation
This criterion applies to sequential navigation, such as Tab order.
It does not prohibit other keyboard navigation patterns, such as:
- Arrow keys within menus
- Tree controls expanding and collapsing
- Sliders responding to arrow keys
As long as these interactions follow expected patterns for the component, they do not violate this criterion.
Common Focus Order Problems
Failures often occur when:
- Focus jumps between unrelated sections
- Form fields are interleaved incorrectly
- Visually grouped controls are separated in focus order
tabindexvalues are used to force a custom order- Containers and their children are both focusable
Example of a problematic pattern:
<div tabindex="0">
<button>Submit</button>
</div>This can cause focus to land on a non-operable container before the actual control, creating confusion.
Static Content and Focus
This criterion does not forbid making non-interactive content focusable.
However, focusable static content must not:
- Interrupt task flow
- Create dead ends
- Appear multiple times in the focus order
As a best practice, avoid adding focus to elements that cannot be operated.
Examples
Passing examples
A modal dialog opens after a button is activated. Focus moves from the button into the dialog, cycles within the dialog, and returns to the button when the dialog is closed.
A page places the main content first in the DOM and uses CSS to visually position navigation on the left. Focus moves to the main content first, preserving meaning and usability.
Failing example
A form’s focus order alternates between address fields and newsletter checkboxes, causing focus to jump back and forth between unrelated sections.
Rule Description
Focusable components must receive focus in an order that preserves the meaning and operation of the content. If focus order creates confusion or makes tasks harder to complete, the criterion fails.
The Algorithm
- Navigate the page using Tab and Shift + Tab
- Observe the sequence in which elements receive focus
- Check whether the order makes sense for the task
- Verify that related elements are grouped logically
- If focus jumps unpredictably or breaks task flow:
- The criterion fails
How to Avoid Focus Order Issues
- Keep DOM order aligned with logical content order
- Avoid positive
tabindexvalues - Do not make containers focusable unless necessary
- Group related controls together in markup
- Test navigation without a mouse
How to Test This
- Navigate the entire page using only the keyboard
- Follow common tasks such as filling forms or opening dialogs
- Watch for focus jumps or skipped elements
- Test with screen magnification to verify context is preserved
Wrapping Up
Focus Order is about navigational clarity. If keyboard focus moves in a way that breaks meaning or operation, users are forced to guess where they are and what to do next.
A logical focus order:
- Preserves relationships
- Supports efficient navigation
- Makes keyboard interaction reliable
At Level A, this requirement is fundamental. If the focus order does not make sense, the page does not work for keyboard users.
