Practice 1
Focus order
Tab through a small task flow and compare visual order with keyboard focus order.
Course progress: 0 / 20 lessons
LESSON 17 OF 20
Controls and navigation
Custom controls must expose the same complete contract that users receive from strong native controls: meaning, state, operation, and predictable focus.
In this lesson
Evaluate keyboard paths, focus order, control semantics, state, relationships, and recovery.
Start with native behavior
Native elements provide semantics, focus, and keyboard behavior that custom components otherwise have to recreate and maintain.
Keep focus and state distinct
Focus identifies the current interaction location. Selected, checked, expanded, and current describe state. A useful control exposes both correctly.
Follow the complete keyboard path
Test entry, movement, activation, Escape behavior, and focus return. A control is not accessible merely because Tab eventually reaches it.
Communicate relationships
Tabs and panels, menu buttons and menus, disclosures and controlled content, and help text and fields all need programmatic relationships.
What to remember
A custom control is complete only when its name, role, state, relationships, focus behavior, and keyboard operation work together.
Knowledge check
Answer every question, then use the forward lesson button to record this lesson as complete. The check is not scored and can be repeated.