Tab Order - Good Example

This example demonstrates proper tab order that follows the natural DOM structure, ensuring logical and predictable keyboard navigation for all users.

Accessibility Features

  • Tab order follows the natural DOM structure, creating a logical and predictable navigation flow
  • No tabindex attributes are used, allowing the browser to handle tab order naturally
  • Navigation links appear before the form, following a logical reading order
  • Form fields are arranged in a logical sequence: Name → Email → Message → Submit
  • All interactive elements are keyboard accessible and follow expected tab patterns

How to Test for Accessibility

  • Use the Tab key to navigate through the page and observe the smooth, logical order
  • Notice how focus moves naturally from navigation links to form fields in reading order
  • Verify that the tab sequence follows: Home → About → Contact → Name → Email → Message → Submit
  • Test that Shift+Tab works correctly for reverse navigation
  • Ensure all interactive elements are reachable via keyboard navigation

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