Rather than smoothly moving from one element to the next, users are left searching for the right path.
Focus Order ensures that the focus moves in a predictable, sequential way, helping keyboard and screen reader users navigate the page without getting lost.
Who this impacts
- People using keyboards: For those who rely on keyboards to navigate, focus order is everything. If it’s unpredictable, it makes navigating a site slow, frustrating, and confusing.
- Screen reader users: A clear, logical focus order ensures that screen reader users can follow the page structure and interact with elements in the correct sequence.
- Screen magnification users: Magnification moves with the focus, so following a logical order matters.
- Everyone: A consistent focus order often comes straight from good user experience design, improving usability and creating a smoother, more intuitive experience for all users.
How to meet Focus Order
- Establish a predictable focus order: Ensure the focus moves sequentially from one element to the next, following the visual flow of the page.
- Test with keyboard-only navigation: Test the focus order by navigating your site with just a keyboard. Make sure the focus moves logically and doesn’t skip or jump between elements. You cannot test this on a Mac, as the system overrides any custom tabindex values and sets the tab order to match the visual order.
- Use obvious focus indicators: Make sure the current focus is clearly visible so that users can easily see where they are on the page.
Practical example
Exceptions
Certain content, like complex forms or dynamic menus, may require a custom focus order, but it should always be predictable and follow a logical progression based on the page’s structure.
Top tips
- Keep the flow intuitive: Ensure the focus follows a natural reading and interaction order.
- Test focus with assistive tools: Use screen readers and keyboards to test the focus order and make sure it flows properly for all users. Remember that focus order must not be tested solely on a Mac because it overrides any custom settings.
- Maintain obvious focus states: Make sure focus states are clearly visible, so users always know where they are on the page.