# Focus Order: Logical Tab Order Explained (WCAG 2.4.3)

Source: https://allyway.ai/glossary/focus-order

Focus order is the sequence in which interactive elements receive keyboard focus when a user presses Tab. WCAG 2.4.3 requires that this sequence preserves the meaning and operability of the page.

Focus order is the sequence in which links, buttons and form fields receive keyboard focus as someone presses Tab. When the focus order follows the logic of the page, keyboard users move through it the way everyone else reads it. When it jumps around, a simple form or menu becomes a puzzle.

## What it means

[WCAG 2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) is a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2). It applies when a page can be navigated sequentially and the order affects meaning or operation. In that case, focusable components must receive focus in an order that preserves meaning and operability.

In HTML, the tab order (also called tabbing order) comes from the order of elements in the source code. Two things change it: positive `tabindex` values and scripts that move focus or insert content. W3C notes that more than one order can be correct – a table can be read row by row or column by column – and that the focus order does not have to match the visual layout pixel for pixel. It must not confuse people, though.

Who is affected: people who use [keyboard navigation](https://allyway.ai/glossary/keyboard-navigation), screen reader users, people with switch devices and anyone who fills in forms with Tab instead of the mouse. If the order is wrong, they enter data in the wrong field, miss content or lose track of where they are.

| Situation | Typical result |
|---|---|
| Source order matches visual order | Passes |
| Sidebar after main content in HTML, placed left with CSS | Passes (W3C example) |
| Positive `tabindex` values that jump between sections | Fails (F44) |
| Dialog or menu not next to its trigger in the tab order | Fails (F85) |
| Modal dialog keeps focus and returns it to the trigger on close | Passes |

> **Tip:** > **Fix the source order, not the tabindex**
> W3C technique C27 recommends making the DOM order match the visual order. Use `tabindex="0"` to make a custom control focusable and `tabindex="-1"` for elements you focus by script – avoid positive values.

## Examples

A newsletter form where positive `tabindex` values send the cursor from the first name straight to a checkbox at the bottom:

```html title="Example"
<!-- Wrong: positive tabindex breaks the natural order -->
<input id="first" tabindex="1">
<input type="checkbox" id="news" tabindex="2">
<input id="last" tabindex="3">

<!-- Right: source order = reading order, no tabindex needed -->
<input id="first">
<input id="last">
<input type="checkbox" id="news">
```

A menu or dialog should be inserted in the DOM right after the button that opens it (technique SCR26), so the next Tab lands inside it. A modal dialog built with the HTML `dialog` element (H102) keeps focus inside while open.

**Do:** Do

Keep the HTML order the same as the reading order. Put pop-up content right after its trigger. Return focus to the trigger when a dialog closes. Add a [skip link](https://allyway.ai/glossary/skip-link) so keyboard users can jump past repeated navigation.

**Don't:** Don't

Use `tabindex="1"` or higher to "fix" a layout. Reorder content only with CSS (`order`, `flex-direction: row-reverse`, absolute positioning) so the visual and tab order drift apart. Append dialogs at the end of `body` without moving focus.

## How to check the focus order



## Questions

Q: What is the difference between focus order and tab order?
A: In everyday use they mean the same thing: the order in which elements receive focus with the Tab key. "Focus order" is the WCAG term; "tab order" describes how keyboard users experience it.

Q: Should I use tabindex to set the focus order?
A: Only `tabindex="0"` and `tabindex="-1"`. Positive values create a separate order that comes before everything else and is hard to maintain – W3C lists this as failure F44 when meaning or operability is lost.

Q: Does the focus order have to match the visual layout exactly?
A: No. W3C says the order does not have to follow the layout exactly, but it must make sense. A sidebar placed after the main content in the HTML is fine; a form that jumps between unrelated fields is not.

Q: Which laws require a logical focus order?
A: 2.4.3 is a Level A criterion, so it is part of every standard based on WCAG AA – including [EN 301 549](https://allyway.ai/regulations/en-301-549) clause 9.2.4.3, which the [European Accessibility Act](https://allyway.ai/regulations/eaa) relies on.

Q: How can I find focus problems on my website?
A: Tabbing through the page is the most reliable test, because tools cannot judge whether an order makes sense. For the issues a tool can detect, the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) checks your homepage against WCAG 2.2 AA.