2.4.3 – Focus Order – Level A
High-Level Description
This success criterion ensures that when users navigate a page using the keyboard, the focus moves in a logical, meaningful order that reflects the visual and functional structure of the content. A correct focus order supports comprehension, usability, and efficiency for keyboard-only and screen reader users.
High-Level Description
Applies to:
- All interactive elements - buttons, links, form fields, menus, modals.
- Custom components with focusable elements.
- Pages with dynamic or hidden content that becomes focusable - popups, carousels, overlays.
This allows:
- Users to understand the interface as they move through it.
- A predictable and intuitive experience, especially for assistive technology users.
- Sustaining of reading and interaction flow, even without a mouse.
Indicators of Non-Compliance:
- Focus jumps around the screen in a confusing way.
- Content is skipped completely.
- Keyboard focus enters hidden or irrelevant content.
- Interactive elements appear in a different order from their visual position.
Real World Examples
| Scenario | Poor Focus Order | Correct Focus Order |
|---|---|---|
| Header > Main > Footer page structure | Focus jumps from header to footer, skipping main content. | Header → Main Content → Sidebar → Footer Maintains logical reading and interaction flow. |
| Navigation menu with dropdown | Focus skips dropdown items or jumps elsewhere. | Focus moves through each dropdown item in order. Enables keyboard navigation without disorientation. |
| Carousel slide navigation | Focus moves to every single carousel slide item. | Focus moves to only the carousel content displayed → prev/next arrows in visual order. |
| Modal popup | User triggers the popup but focus remains on the current page/element. | Focus moves to content within modal dialog |
Disability Impact
| Disability Group | Without Logical Focus Order | With Logical Focus Order |
|---|---|---|
| Blind Users | Screen reader announces content out of sequence. | Content announced in expected reading/interaction flow. |
| Motor Impairments | Skipped elements become inaccessible via keyboard. | All interactive elements reachable in predictable order. |
| Low Vision | Keyboard focus appears in visually unrelated or invisible sections. | Focus follows on-screen layout and visible elements. |
| Cognitive Disabilities | Confusing navigation disrupts task completion. | Consistent navigation reinforces understanding and task success. |
Supporting Documentation
- WCAG 2.2 Success Criterion 2.4.3 - Focus Order
- ARIA Authoring Practices – Focus Management
- G59 – Placing focus in an order that follows the meaning of content
Remediation Strategies
1 - Ensure DOM Order Matches Visual Order
Write HTML to allow tabbing sequence follows the natural visual flow.
< !-- GOOD -- >
< header >...< /header >
< main >...< /main >
< aside >...< /aside >
< footer >...< /footer >
2 - Use Tabindex Thoughtfully
Avoid using tabindex values > 0. If necessary, use tabindex="-1" to programmatically focus elements without making them interactable.
3 - Test Keyboard Navigation Thoroughly
Use only the Tab, ESC, Shift+Tab, Enter, Space, and arrow keys to navigate every page or feature.