How can I check whether my page’s tab order follows its visual structure?
Quick answer
Use the page with only a keyboard: start at the top, press Tab repeatedly, and record each focused control in order. Compare that sequence with what the layout and content suggest a person should encounter next. The orders need not match exactly if the sequence remains understandable and usable. If they diverge confusingly, check the DOM order first; rearranging elements there is generally a more robust correction than forcing a new tab sequence with tabindex. [S1] [S2]
The question, the details, the next step.
What should I compare when I check a page’s tab order? I can see where controls are, but I’m not sure what “follows the visual structure” means in practice.
Compare the sequence keyboard users encounter with the sequence the page communicates through its content and layout. For example, if a form presents “Name,” then “Email,” then “Send,” focus reaching “Send” before “Email” may be confusing. But do not treat every difference in screen position as an error: the order need not exactly reproduce the visual layout or programmatic reading order if it still preserves meaning and operability. [S1]
Ask whether the next focused control makes sense given the current section, task, and relationships. The aim is a predictable, understandable interaction—not a perfect tracing of columns or decorative positioning.
How do I inspect it without relying on a screen reader or special software?
For a basic review, use the page with a keyboard alone. Reload it, start at the top, and press Tab one time at a time. Note which control receives focus and check that you can see which control it is. Use Shift+Tab to check that moving backward makes sense too. Continue through the relevant content, forms, menus, or dialogs.
Record labels or short descriptions, not just key presses. For example:
- Skip link
- Search field
- Search button
- Name field
- Email field
- Send button
This is an illustration, not a required sequence. Compare your notes with the task and page structure. Ask whether a jump interrupts a relationship or makes the next action unclear.
What’s the difference between DOM order and visual positioning, and what should I do if they disagree?
DOM order is the order of elements in the page’s underlying document structure. Visual positioning is where those elements appear on screen. A layout can place an element somewhere different from where it occurs in the DOM, so keyboard focus may not trace the screen from left to right or top to bottom.
Judge the mismatch by its effect: does the focus sequence still communicate relationships and let someone operate the page? If not, inspect the DOM order and consider rearranging elements so the tab sequence and reading order remain aligned and predictable. The WAI-ARIA Authoring Practices Guide describes DOM rearrangement as the more robust way to change tab order while maintaining that alignment across browsers. [S2] Avoid using tabindex to force a sequence that disrupts meaning. [S1] Not every page needs one universal visual traversal order.
Can you show me how to turn my notes into a concrete review and a useful fix request?
Separate what you observed from what you expected. For example, suppose a two-column form shows “Contact details” before “Request details.” If focus reaches a request field, then jumps back to a contact field, record the sequence and consider whether the switch is understandable. This example is hypothetical; check the actual page directly.
Adapt this report:
“Page/component: [name or location] Task: [what a visitor is trying to do] Expected meaningful sequence: [control A] → [control B] → [control C] Observed keyboard sequence: [control A] → [control C] → [control B] Why this is confusing or prevents operation: [brief explanation] Suggested review: Check the DOM order and whether the visual and reading sequences communicate the same relationships. Consider a structural adjustment if the sequence is misleading.”
After a change, repeat the review from the beginning. A tab-order check focuses on sequential keyboard navigation; by itself, it does not establish that every aspect of keyboard access or screen-reader behavior works correctly.
A practical checklist
Choose a page task and write down the meaningful sequence of controls needed to complete it.
Navigate from the start using Tab; record each focused control by its label or purpose.
Use Shift+Tab to check whether the reverse sequence remains understandable.
Compare the observed order with content relationships and layout; note confusing jumps, not harmless differences in screen position.
If the mismatch is disruptive, inspect DOM order and consider a structural change rather than forcing a sequence with tabindex.
Repeat the keyboard review after changes and record remaining concerns.
A few more useful answers
Does keyboard focus have to follow the exact left-to-right, top-to-bottom visual order?
No. The sequence can differ from the visual layout if it remains understandable and operable. The key question is whether it preserves meaning and makes sense for the task. [S1]
If the tab order feels wrong, should I add tabindex values to rearrange it?
Does a sensible tab sequence prove the page’s reading order is also correct?
No. A tab-only review does not verify the complete reading experience. The WAI-ARIA Authoring Practices Guide recommends keeping tab order and screen-reader reading order logical and aligned. [S2]
Sources
References used for this guide.
- [S1] W3C Understanding WCAG 2.2: Focus Order w3.org · Checked
- [S2] W3C ARIA APG: Developing a Keyboard Interface w3.org · Checked