Tab Order - Bad Example

This example demonstrates how incorrect tab order creates accessibility barriers and confusion for keyboard users. The tab sequence is intentionally broken to show the impact of poor focus management.

Accessibility Issues

  • Tab order is intentionally broken using tabindex attributes, creating an illogical navigation sequence
  • The form fields follow an unnatural order: Email → Submit → Name → Message → Navigation links
  • Hidden focusable elements are inserted to further disrupt the user experience
  • No visual indicators or instructions explain the broken tab order
  • Users cannot predict where focus will move next, creating confusion and frustration

How to Test for the Issue

  • Use the Tab key to navigate through the page and observe the jumping, unpredictable focus
  • Notice how focus moves from Email to Submit button, skipping the Name field
  • Experience the confusion when trying to complete the form in a logical order
  • Observe how the navigation links are reached last, despite appearing at the top
  • Try to understand the page structure without visual cues to experience the disorientation

WCAG Related Criteria

  • 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes
  • 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages