Focus order
Focus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
Focus order describes the sequence in which focusable elements are reached during step-by-step navigation. What matters for interaction is whether this route preserves understandable content relationships and the actions needed.
Keep the workflow coherent
In a fictional request form, contact details are followed by a request-related selection. If focus jumps back and forth between these groups, the connection can be lost. After a dynamic change, newly displayed content also needs an understandable place in the workflow.
Not every difference is an error
W3C requires a meaningful, operable sequence and allows more than one logical order. Focus order need not exactly match the visual arrangement in every case. Check the route using a concrete task, including newly displayed content and returning from dialogs. A tidy layout alone does not show the actual sequence in which the keyboard moves through the interface.
Sources
Related terms
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
- Accessible nameAn accessible name labels a control for assistive technology. It should explain the action and agree with the visible text.
- Search suggestionA search suggestion offers a possible query while someone types. Selection, submission and the later results list need to work together clearly.
- Interactive prototypeAn interactive prototype responds to selected actions. It can reveal a path through an interface without implementing the real processing behind it.
- PrototypeA prototype makes a design testable against a specific question. Its form and scope follow the uncertainty that needs to be resolved.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence