Level A
Operable
WCAG 2.0+
Success Criterion 2.4.3: Focus Order
Official W3C Definition
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 Criterion Matters
When users navigate with a keyboard, focus should move in a logical order that makes sense. A confusing focus order can make content difficult to understand and use, especially for users who cannot see the visual layout of the page.
Key Principle: Focus order should generally follow the visual reading order (left-to-right, top-to-bottom in Western languages) unless a different order is more meaningful for the content.
Who Benefits
Screen Reader Users
Navigate sequentially; logical order is essential.
Keyboard Users
Tab through elements; confusing order causes frustration.
Cognitive Disabilities
Predictable navigation reduces cognitive load.
Low Vision Users
May have limited view; need logical sequence.
How to Meet This Criterion
Technique 1: Match DOM Order to Visual Order
Good Example - Logical Source Order
<!-- HTML order matches visual left-to-right, top-to-bottom -->
<header>
<a href="/">Logo</a>
<nav>
<a href="/about">About</a>
<a href="/services">Services</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<form>
<label for="name">Name</label>
<input type="text" id="name">
<label for="email">Email</label>
<input type="email" id="email">
<button type="submit">Submit</button>
</form>
</main>Technique 2: Avoid Positive tabindex Values
Good Example - Natural Tab Order
<!-- Good: Use DOM order, not tabindex -->
<button>First Button</button>
<button>Second Button</button>
<button>Third Button</button>
<!-- tabindex="0" makes element focusable in natural order -->
<div role="button" tabindex="0">Custom Button</div>
<!-- tabindex="-1" removes from tab order but allows programmatic focus -->
<div id="modal" tabindex="-1">Modal content</div>
Bad Examples
<!-- Bad: Positive tabindex creates confusing order -->
<button tabindex="3">Third visually, first in tab order</button>
<button tabindex="1">First visually, second in tab order</button>
<button tabindex="2">Second visually, third in tab order</button>
<!-- Bad: CSS reorders visually but not in DOM -->
<style>
.container { display: flex; flex-direction: row-reverse; }
</style>
<div class="container">
<button>Visually right, but focused first</button>
<button>Visually left, but focused second</button>
</div>Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Using positive tabindex values | Creates unpredictable, hard to maintain order | Use DOM order; only use tabindex="0" or "-1" |
| CSS visual reordering | Focus order doesn't match visual order | Match DOM order to visual presentation |
| Modal appears but focus doesn't move | Focus stays behind modal | Move focus to modal when it opens |
| Dynamically inserted content | New content may be in wrong tab order | Insert content in logical position in DOM |
| Form labels after inputs | Users encounter input before its label | Place labels before inputs in source |
Testing Methods
Manual Testing Steps
- Unplug mouse: Navigate using only keyboard
- Press Tab repeatedly: Note the order focus moves
- Compare to visual layout: Does focus order match what you see?
- Check forms: Label then input, fields in logical order
- Test modals: Focus moves into modal, stays there, returns when closed
- Check dynamic content: New content appears in logical tab order
Common Issues to Look For
- Focus jumping around unexpectedly
- Focus moving right-to-left when it should go left-to-right
- Focus skipping visible elements
- Focus order different from reading order
- tabindex values greater than 0
Related Criteria
1.3.2 Meaningful Sequence
Reading order preserves meaning
2.1.1 Keyboard
All functionality keyboard accessible