User Experience
Focus Order
Plain English
The order things are selected when tabbing.
Definition
Focus order defines the sequence in which interactive elements receive focus when navigating with a keyboard.
In practice
Used to ensure logical and accessible glossaryNavigationNavigation is the system of menus, links, and cues that lets people move through a product and reach what they need. It exposes the underlying structure, and is how most users experience that structure.Open glossary term.
In context
It breaks most often in modals and custom components, where focus stays behind the overlay and a keyboard user is stranded on a screen they cannot see.
The reality
Poor focus order makes glossaryInterfaceAn interface is the point of interaction between a user and a system, where inputs are made and outputs are received. It can be visual, physical, or conversational.Open glossary term unusable for keyboard users.
Compared with
Focus Order vs Reading Order
Reading order is the sequence content is presented in. Focus order is the sequence interactive elements receive keyboard focus. When CSS reorders elements visually, the two diverge and the glossaryInterfaceAn interface is the point of interaction between a user and a system, where inputs are made and outputs are received. It can be visual, physical, or conversational.Open glossary term becomes unnavigable by keyboard.
FAQ
Common questions
A few practical answers to the questions that usually come up around this term.
What is focus order?
It is the sequence of keyboard glossaryNavigationNavigation is the system of menus, links, and cues that lets people move through a product and reach what they need. It exposes the underlying structure, and is how most users experience that structure.Open glossary term.
Why is focus order important?
It ensures serviceAccessibilityFind accessibility issues early, improve usability, and build products that are more inclusive, usable, and compliant.Open service and glossaryUsabilityUsability is how easy and efficient it is for users to complete tasks within a product. It focuses on clarity, simplicity, and reducing effort so users can achieve their goals without confusion or friction.Open glossary term.
What is good focus order?
Logical and matching visual glossaryLayoutLayout is the arrangement of elements on a page or screen, determining how content is organised and presented. It influences readability, usability, and overall experience.Open glossary term.
What happens if it is wrong?
glossaryNavigationNavigation is the system of menus, links, and cues that lets people move through a product and reach what they need. It exposes the underlying structure, and is how most users experience that structure.Open glossary term becomes confusing.
Related Services
Related Guides
Related Terms
