Skip to main content
WCAG 2.4.3 Focus Order (Level A)
This page demonstrates proper focus order implementation and common pitfalls to avoid.
- Goal: Keyboard users navigate content in a correct order.
- What to do: Elements receive focus in an order that preserves meaning.
- Why it's important: Navigating a site or application with only the keyboard will make sense.
Logical Focus Order Example
Tab through these elements to see a logical focus order:
Form Focus Order
Bad Example: Illogical Form Order
Why this fails: Labels appear after inputs in the tab order, creating confusion.
Good Example: Logical Form Order
Why this works: Labels appear before inputs in a logical reading order.
Modal Dialog Focus Order
Dynamic Content Focus Management
Focus Order Best Practices
- Maintain a logical tab order that matches visual layout
- Ensure form labels precede their inputs in the tab order
- Keep related elements together in the focus sequence
- Manage focus appropriately in dynamic content
- Test navigation with keyboard only