Skip to main content
Accessibility.com, LLC
Category: Input and Navigation

Focus Order

Also known as: Navigation Order, Tab Order
Simply put

Focus order is the sequence in which interactive elements, such as links, buttons, and form fields, receive keyboard focus as a user moves through a page. When this order is logical and predictable, people navigating without a mouse can understand and operate the content in a way that preserves its meaning. A confusing or jumbled focus order can make a page difficult or impossible to use for keyboard and assistive technology users.

Formal definition

Focus order refers to the sequence in which focusable components (e.g., links, form inputs, buttons, and other interactive controls) receive focus during sequential keyboard navigation. Under WCAG 2.1 Success Criterion 2.4.3 (Focus Order, Level A), if a page can be navigated sequentially and the navigation sequence affects meaning or operation, focusable components must receive focus in an order that preserves that meaning and operability. In practice, focus order should generally follow a logical and intuitive progression, often aligned with the visual reading order, so that keyboard and assistive technology users encounter content coherently. Note that DOM order, source order, and any use of the tabindex attribute can affect focus order, and that manual keyboard and assistive technology testing is typically required to verify conformance, as automated checks alone may not detect illogical sequencing.

Why it matters

Focus order directly determines whether people who navigate without a mouse can understand and operate a page. Keyboard users, screen reader users, and others relying on assistive technology move through interactive elements sequentially, and if that sequence does not preserve the page's meaning or operation, the experience can become confusing or unusable. For example, a form whose fields receive focus out of order, or a modal dialog that sends focus somewhere unexpected, can trap or disorient users and prevent them from completing essential tasks.

Under WCAG 2.1, Success Criterion 2.4.3 (Focus Order) is a Level A requirement, the most fundamental conformance level, which reflects how basic and essential logical focus order is to accessible navigation. When a page can be navigated sequentially and that sequence affects meaning or operation, focusable components must receive focus in an order that preserves meaning and operability. A logical order, often aligned with the visual reading order, helps users build an accurate mental model of the content and interact with it coherently.

Because illogical focus order may not be detected by automated checks alone, teams that rely solely on automated tooling can ship pages that technically render but frustrate keyboard and assistive technology users in practice. Verifying focus order generally requires manual keyboard testing and testing with assistive technology. Meeting this success criterion supports usability but does not by itself guarantee an accessible experience across all disabilities or immunity from legal claims; this guidance is not legal advice, and requirements evolve through regulation and case law.

Who it's relevant to

Front-end developers and engineers
Developers control the DOM structure and any use of tabindex, both of which affect focus order. Building components so that focus follows a logical, intuitive sequence, generally aligned with the visual reading order, helps meet WCAG 2.1 Success Criterion 2.4.3 (Level A) and supports keyboard and assistive technology users.
UX and UI designers
When visual layouts diverge from the underlying source order, focus order can become confusing. Designers who consider navigation sequence alongside visual design help ensure that the order in which elements receive focus preserves the intended meaning and operation of the page.
Accessibility engineers and QA testers
Because illogical focus order may not surface through automated checks alone, testers verifying conformance generally need to navigate pages manually with a keyboard and test with assistive technology to confirm the sequence is logical and preserves meaning and operability.
Keyboard and assistive technology users
People who navigate without a mouse, including many screen reader users, rely on a predictable focus sequence to understand and operate content. A logical focus order lets them encounter interactive elements coherently, while a jumbled order can make a page difficult or impossible to use.
Compliance officers and legal counsel
Focus Order is a Level A success criterion commonly cited when assessing keyboard accessibility. Meeting it supports accessibility efforts but does not guarantee compliance or immunity from legal claims. Because requirements evolve through regulation and case law, qualified legal counsel should be consulted for jurisdiction-specific obligations.

Inside Focus Order

Focus Order
The sequence in which interactive elements (such as links, buttons, and form fields) receive keyboard focus as a user navigates a page, typically using the Tab key. It determines the path a keyboard or assistive technology user follows through content.
WCAG Success Criterion 2.4.3 Focus Order
A Level A success criterion, present since WCAG 2.0, which states that if a page can be navigated sequentially and the navigation sequence affects meaning or operability, focusable components must receive focus in an order that preserves meaning and operability.
Logical and Meaningful Sequence
Focus should generally follow an order that is consistent with the meaning and operation of the content, often reflecting the visual reading order and the logical flow of tasks so that relationships and context are preserved.
DOM Order and Source Order
By default, keyboard focus commonly follows the underlying document (source) order of elements. When visual layout is rearranged with CSS, the visual order and focus order may diverge, which can create confusing navigation.
tabindex Attribute
An HTML attribute that can influence focus behavior. A value of 0 includes an element in the natural focus order, -1 makes an element focusable programmatically but not via sequential navigation, and positive values override the natural order and are generally discouraged because they can produce unpredictable sequences.
Focus Management in Dynamic Content
The practice of directing focus appropriately when content changes, such as opening modal dialogs, revealing menus, or updating regions, so that focus moves to and is contained within relevant content and returns sensibly afterward.
Relationship to Related Criteria
Focus Order is distinct from but works alongside criteria such as 2.4.7 Focus Visible (making the focused element perceivable) and 2.1.1 Keyboard (ensuring functionality is operable by keyboard). Meeting one does not satisfy the others.

Common questions

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

Does a logical focus order guarantee my page is accessible?
No. Meeting the Focus Order success criterion addresses one specific aspect of keyboard and assistive technology navigation, but it does not guarantee an accessible experience for all users. Other factors, such as visible focus indicators, meaningful labels, correct roles, and overall usability, also affect accessibility. Automated tools detect only a portion of focus-related issues, so manual testing and testing with assistive technologies are generally needed to confirm the experience works in practice.
Is focus order the same thing as the visual order of elements on the screen?
Not necessarily. Focus order refers to the sequence in which interactive elements receive keyboard focus, which is commonly driven by the underlying DOM order rather than the visual layout. CSS positioning can make the visual arrangement differ from the source order, so an element that appears first visually may not be first in focus order. The goal is that the focus sequence preserves meaning and operability, which often, but not always, aligns with the visual reading order.
How can I test the focus order on a page?
A common manual approach is to navigate the page using the Tab key (and Shift+Tab to move backward) without using a mouse, observing the sequence in which interactive elements receive focus. Testers generally check that the order preserves meaning and operability and that focus does not become trapped or jump unexpectedly. Combining this with testing using assistive technologies such as screen readers helps reveal issues that keyboard-only checks may miss.
When should I use the tabindex attribute to control focus order?
Using a well-structured DOM order to establish a logical sequence is generally preferred, since it keeps focus order and reading order aligned. The tabindex attribute may be used in specific cases, for example, tabindex="0" to include a custom interactive element in the natural sequence. Positive tabindex values, which force a specific order, are commonly discouraged because they can be difficult to maintain and may produce a confusing sequence. Approaches vary by context, so evaluate the impact on the overall navigation experience.
How should focus be handled when dynamic content, such as a modal dialog, appears?
When new content like a modal is opened, focus is commonly moved to the dialog so keyboard and assistive technology users can interact with it, and focus is often constrained within the dialog while it is open. When the dialog closes, returning focus to a logical location, frequently the element that triggered it, helps maintain a coherent sequence. Managing focus this way supports a focus order that preserves meaning and operability as the interface changes.
Which WCAG success criterion addresses focus order, and at what conformance level?
Focus Order is a WCAG success criterion under the Operable principle, and it is defined at Level A. It requires that when a sequence of navigation affects meaning or operability, focusable components receive focus in an order that preserves meaning and operability. Because it is Level A, it falls within the scope commonly targeted by projects aiming for Level AA conformance, which includes all Level A and AA criteria.

Common misconceptions

Positive tabindex values are a reliable way to control and improve focus order.
Positive tabindex values are generally discouraged because they override the natural order and can create fragile, unpredictable sequences that are difficult to maintain. Structuring the source order logically is commonly preferred, with tabindex="0" and -1 used for specific purposes.
If elements are focusable by keyboard, the focus order automatically satisfies WCAG.
Being focusable addresses keyboard operability, but Focus Order (2.4.3) additionally requires that the sequence preserve meaning and operability. A page can be fully keyboard-focusable yet still fail because the order is confusing or changes meaning.
A visually correct layout guarantees a correct focus order.
CSS can rearrange the visual presentation independently of the source order that focus typically follows, so a layout that looks correct may still expose an illogical focus sequence. Testing with a keyboard is needed to confirm the actual order.

Best practices

Navigate the page using only the keyboard (primarily the Tab and Shift+Tab keys) to verify that focus moves in a logical order consistent with the content's meaning and operation.
Structure the underlying source/DOM order so it reflects the intended reading and interaction sequence, rather than relying on positive tabindex values to reorder focus.
Reserve tabindex="0" for making custom interactive elements part of the natural focus order and tabindex="-1" for elements that should receive focus programmatically but not via sequential navigation.
Manage focus for dynamic components such as modals and menus, moving focus into newly revealed content, containing it appropriately, and returning it to a sensible location when the content closes.
Check for divergence between visual order and focus order wherever CSS repositions content, and reconcile the two so users are not confused.
Complement focus order review with related checks for keyboard operability and visible focus indication, and use manual and assistive technology testing since automated tools detect only a portion of focus-related issues.