2-3 min

Tab Order Detective

Keyboard Navigation Masters

Scenario

David is building a contact form for his freelance design business. He's excited about the modern layout but didn't realize the tab order jumps around confusingly. When his friend Jamie, who navigates exclusively with keyboard due to a motor disability, tried to fill out the form, she got frustrated because pressing Tab didn't move through the fields in a logical order. Help David fix the tab sequence so keyboard users like Jamie can smoothly navigate through his contact form!

Your Task

Fix tab order with tabindex

Success Metric:

Logical tab order

Hints
  • 1.Tab order should follow visual layout and logical flow
  • 2.Use positive tabindex values in sequential order
  • 3.Consider removing tabindex entirely to use natural DOM order
Code Editor
Edit the code below to complete the activity
HTML6 lines