Ensure focus order is logical

Navigator panel
Check as complete

Many people use only the keyboard to navigate a website. Tabbing order should be logical so that keyboard users can sequentially navigate and use every interactive element on a page.

Check your tabbing order

Check the tab order of your page by pressing the “Tab” key repeatedly to navigate through all interactive elements. You might notice elements get activated out of order, or that tabbing jumps you around the page.

When your tab order is illogical or nonlinear, consider the following:

  • Position elements in the DOM (Document Object Model) rather than visually positioning them with CSS properties. (Focus order is determined by the DOM and will often be nonlinear or illogical if we use CSS instead of the Navigator to arrange them.)
  • Group like content using the List element.
  • Match focus order with the visual layout. (Usually, this means linear, from left to right and top to bottom, but it depends on your page’s layout.)

WCAG reference:

2.4.3 Focus Order

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress