Tab Order Strategy: The Keyboard User's Path

Why the Designer Should Decide the Tab Order?

Although tab order is usually an automatic consequence of the order in the HTML code (the DOM), visual design can be much more complex. As designers, we sometimes create layouts with columns, grids, or floating elements that don’t follow a pure linear order.

If you let the tab order be “whatever comes out of the code,” a keyboard user might end up jumping from the top-left corner to the bottom-right corner without warning. As a designer, you know the intent of the flow, and you must communicate it to the development team.

The 4 Principles of a Good Tab Order

For your tabbing strategy to be successful, follow these four principles:

1. Linearity and Predictability (Logic)

The tabber should follow the cultural reading order. In the West: from top to bottom and left to right.

• Danger: If you have a two-column form, define whether the tabber should go:
  • A (Column by Column): All left-side fields first, then the right-side ones.
  • B (Row by Row): Even fields from left to right.

2. Efficiency and Agility (Shortcut)

Don’t force the user to cycle through 50 menu navigation links every time they want to read a new page’s main content.

• Solution: Implement a “Skip to Content Link”. An invisible link (it only appears when tabbing) that jumps directly to the main content area.

3. Logical Grouping (Context)

Elements that perform similar tasks should be tabbed consecutively.

• Example: In a video player, the “Play,” “Pause,” “Volume,” and “Full Screen” controls should be together in the tab order.

4. Don’t Leave Elements Forgotten

Anything that is clickable with the mouse MUST be tabbable with the keyboard. If you designed a help icon that opens a tooltip only on hover, that functionality doesn’t exist for the blind or keyboard user.

Special Cases: Dynamism and Modals

A. Modals and Dialogs (Focus Traps)

When a modal opens, the tabber should not leave it. The tab order should rotate exclusively among the elements of the modal itself until it is closed.

B. Dynamically Appearing Content

If pressing a button brings up a new set of options (e.g., a dropdown menu or an accordion), the next step of the tabber should be to enter that new content, not skip it to go to the main page’s next button.

How to Document the Tab Order in Figma (Handoff)

Don’t assume the developer will know the correct order. Add a layer of annotations to your design:

• Use numbered circles (1, 2, 3...) to indicate the sequence.
• Mark elements that should have focus when the page loads (e.g., a search bar).
• Indicate points where focus should return after an action (e.g., “Returns to submit button”).

Mentor’s Tips

• Design with the keyboard in mind: If an action is too difficult to reach by tabbing, simplify the layout. Fewer clicks for a mouse user usually mean fewer keystrokes for a keyboard user.
• The “Infinite Tabber” law: Avoid infinite focus loops (e.g., an image carousel that doesn’t let you out until you’ve gone through all 10 photos). There must always be a clear exit option.
• Real Test: Close your eyes and navigate your product using only the tabber and a screen reader. Was it easy to reach the main action or did you have to tab 40 times?

Useful Resources and Tools

• W3C: WCAG Focus Order
• WebAIM: Keyboard Accessibility Patterns
• Deque University: Sequential Focus Order
• Articles: A Designer’s Guide to Focus Order

visual-vs-dom-hierarchy focus-management aria-vs-semantics screen-reader-testing