Category: Input and Navigation

Tab Order

Also known as: Tab and Reading Order, Keyboard Tab Sequence, Focus Order

Simply put

Tab order is the sequence in which interactive elements, such as links, buttons, and form fields, receive keyboard focus as a user presses the Tab key to move through a page or document. A logical tab order helps people who navigate without a mouse move through content in an order that matches how the page is meant to be read and used. When the tab order is illogical or unpredictable, keyboard and assistive technology users may struggle to complete tasks like filling out a form.

Formal definition

Tab order refers to the sequential navigation order in which focusable elements receive focus when a user presses the Tab key. By default, this order generally follows the source (DOM) order of interactive elements such as links, form controls, and buttons. Developers can influence tab order using the HTML global `tabindex` attribute: a value of 0 places an element in the default sequential focus order, a negative value (e.g., -1) makes an element focusable programmatically but removes it from the Tab sequence, and a positive value assigns an explicit order ahead of default elements (a practice generally discouraged because it can produce a confusing sequence). W3C techniques, such as H4, address providing a logical tab order through the arrangement of links and form controls when the default order does not suffice. Tab order is closely related to, but distinct from, reading order, and both should be verified through manual keyboard and assistive technology testing rather than relying solely on source order.

Why it matters

Tab order directly affects whether people who navigate without a mouse can use a page at all. Keyboard users, including many people who rely on screen readers or other assistive technology, move through interactive elements by pressing the Tab key. When that sequence follows the visual and logical arrangement of the page, users can complete tasks like filling out a form or navigating between fields in a predictable way. When the order is illogical or unpredictable, users may skip essential controls, lose track of where they are, or be unable to finish a task.

Because tab order governs the path through links, buttons, and form fields, problems tend to surface most acutely in interactive workflows. As noted in the evidence, tab order dictates how users navigate from one form field to the next, so a broken sequence can turn an otherwise usable form into a barrier. A logical order matters not only for efficiency but for basic operability.

Tab order is closely related to, but distinct from, reading order, and a page can present focus in a sequence that does not match how the content is meant to be read. Verifying tab order generally requires manual keyboard and assistive technology testing rather than relying on automated checks or source order alone; automated tools detect only a portion of issues. This entry describes general accessibility practice and is not legal advice.

Who it's relevant to

Front-End Developers

Developers control tab order through DOM structure and the tabindex attribute. Understanding how tabindex values of 0, negative, and positive behave, and why positive values are generally discouraged, helps them build predictable keyboard navigation. They should verify the resulting sequence with manual keyboard testing rather than relying on source order alone.

Accessibility Testers and QA Engineers

Because automated tools detect only a portion of issues, testers need to manually tab through pages and forms with a keyboard and assistive technology to confirm that focus moves in a logical order and that no interactive elements are skipped or trapped. They also check that tab order aligns with the intended reading order.

UX and Interaction Designers

Designers shape the visual arrangement and flow of interactive elements, which influences the expected tab sequence. Designing layouts and forms so that the logical reading order and the interaction order align helps developers implement a tab order that matches user expectations.

Content Authors Working in Documents and Forms

Tab order determines how users tab through a document and navigate from one form field to the next. Authors who build forms and structured documents should ensure fields are ordered so keyboard users can complete them in a sensible sequence.

Inside Tab Order

Sequential Navigation

The order in which interactive elements (links, form fields, buttons, and other focusable controls) receive keyboard focus when a user presses the Tab key, or Shift+Tab to move backward.

DOM Order

By default, tab order follows the order of focusable elements in the document object model (source order). Keeping the visual layout aligned with DOM order generally produces a logical, predictable focus sequence.

tabindex Attribute

An HTML attribute that can influence focus behavior. A value of 0 places an element in the natural tab order, a negative value (such as -1) makes an element focusable programmatically but removes it from the tab sequence, and a positive value overrides the natural order and is generally discouraged.

Focus Visibility

The presence of a visible focus indicator so keyboard users can see which element currently holds focus as they move through the tab order.

Relationship to WCAG

Tab order relates to keyboard operability and meaningful sequence. WCAG's Focus Order success criterion (2.4.3, Level A) addresses navigating in an order that preserves meaning and operability; related keyboard requirements are commonly cited alongside it. Practitioners should confirm criteria against the specific WCAG version they target.

Common questions

Answers to the questions practitioners most commonly ask about Tab Order.

Does a logical visual layout automatically guarantee a correct tab order?

No. The order in which elements appear visually on screen does not always match the order in which they receive keyboard focus. Tab order generally follows the underlying source order of the DOM (and any positive tabindex values), which can diverge from the visual arrangement produced by CSS positioning, flexbox, or grid. A page that looks well-organized may still present focus in a confusing sequence to keyboard and assistive technology users, so tab order should be verified independently of visual design.

Can I rely on the tabindex attribute with positive values to fix or fine-tune tab order?

Using positive tabindex values (for example, tabindex="1", tabindex="2") is generally discouraged. Positive values override the natural document order and create a separate focus sequence that is difficult to maintain and easy to break as content changes. The commonly recommended approach is to structure the DOM in the intended reading and interaction order and reserve tabindex="0" (to add an element to the natural order) and tabindex="-1" (to remove it from the tab sequence while keeping it focusable programmatically) for specific needs.

How can I test the tab order on a page?

A common manual method is to place focus at the top of the page and press the Tab key repeatedly, observing where the visible focus indicator moves. Note whether the sequence follows a meaningful reading and interaction order, whether any interactive elements are skipped, and whether focus ever becomes trapped. Testing with actual assistive technologies such as screen readers, in addition to keyboard-only navigation, is generally advised, since automated tools detect only a portion of focus-order issues.

How should tab order be handled in modal dialogs and other overlays?

When a modal or overlay is open, focus is commonly moved into it, and tab order is typically constrained so that keyboard focus cycles among the interactive elements within the dialog rather than escaping to the underlying page. This is often referred to as focus containment or focus management. When the dialog closes, focus is generally returned to a logical location, such as the control that triggered it. Managing this behavior usually requires scripting in combination with appropriate roles and attributes.

What role does DOM source order play in controlling tab order?

For interactive elements that are natively focusable or given tabindex="0", the tab sequence generally follows the order of the elements in the DOM source. Because of this, arranging the source order to match the intended reading and interaction flow is a commonly recommended practice. When CSS is used to reposition content visually, developers should check that the resulting focus order still makes sense, since visual placement and source order can differ.

How does tab order relate to WCAG requirements?

Tab order is closely associated with the WCAG success criterion addressing focus order, which is generally cited at Level A and calls for focusable components to receive focus in an order that preserves meaning and operability. Meeting this criterion is one part of keyboard accessibility rather than a complete guarantee of an accessible experience. This entry describes general concepts and is not legal advice; applicable obligations depend on jurisdiction and evolving regulation and case law, and qualified counsel should be consulted for specific compliance questions.

Common misconceptions

Using positive tabindex values is the best way to control tab order.

Positive tabindex values override the natural document order and are generally discouraged because they are hard to maintain and can create a confusing or unexpected sequence. Structuring the DOM in a logical order is usually the more reliable approach.

If the page looks correctly ordered visually, the tab order will match.

Visual layout can be changed with CSS independently of the DOM, so the focus sequence may not follow the visual reading order. Tab order should be verified by keyboard testing, since meeting a visual expectation does not guarantee a logical focus path.

Automated tools can fully confirm a correct tab order.

Automated testing detects only a portion of issues. Confirming that tab order is logical and usable generally requires manual keyboard testing and, where relevant, assistive technology testing.

Best practices

Structure the DOM so that focusable elements appear in a logical reading and interaction order, allowing the default tab sequence to follow source order.

Avoid positive tabindex values; use tabindex="0" to include custom controls in the natural order and tabindex="-1" for elements that should be focusable only programmatically.

Test the tab order manually with the keyboard, using Tab and Shift+Tab, to confirm the sequence is predictable and preserves meaning.

Ensure a visible focus indicator is present so keyboard users can track their position as they move through the tab order.

Keep the visual layout aligned with the DOM order, and re-check focus behavior whenever CSS or dynamic content changes the presentation.

Verify keyboard operability with assistive technologies in addition to visual checks, since conformance and automated checks alone do not guarantee a usable experience; consult current WCAG guidance for the version you target.