--- title: "Focus Order" url: "https://barrierefreihochzwei.de/en/wcag/2-4-3-focus-order" language: "en" description: "WCAG 2.4.3 requires keyboard focus to move in an order that preserves meaning and operability. Learn how to get it right and avoid the typical mistakes." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:42:00+02:00" --- # Focus Order When keyboard navigation should make sense. - **Erfolgskriterium:** 2.4.3 - **Prinzip:** Operable - **Konformitätsstufe:** Level A - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/focu...](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) Success criterion 2.4.3 # 2.4.3 Focus Order Level AOperable When keyboard navigation should make sense. ## 1. What is the goal of this criterion? Have you ever tried to move through a website with the Tab key – only to find the focus bouncing around like a hyperactive ping-pong ball? From the search field to the footer, back to a button in the top left and then off into nowhere? That’s frustrating for anyone – but for people who rely on the keyboard, it can make a website completely unusable. The goal of Success Criterion 2.4.3 is clear: if a page can be navigated sequentially and the order matters for meaning or operation, focus must reach the elements in an order that preserves meaning and operability. In short: the tab order should be logical and predictable – usually the same way you’d read the page. ## 2. What exactly does it require? Focusable elements must receive focus in a sensible order when you move through the page sequentially – with the Tab key or comparable input methods. The key points: **Logical order:** Interactive elements such as links, buttons and form fields must be reachable in a sensible order. **More than one right answer:** There are often several sensible orders – for example row by row or column by column through a table. What matters is that one of them is followed. **Focus order and reading order:** The focus order doesn’t have to match the source order exactly, as long as users can understand and operate the page. In practice, though, keeping them aligned is the safest approach. **Dynamic content:** When content is added later (for example with JavaScript), it must be integrated sensibly into the existing focus order. One limitation: a sensible order is only required where the order affects meaning or operation. On a page with a few independent elements, the order may not matter at all. ## 3. Why does it matter for accessibility? Imagine filling out an online form, but instead of moving from one field to the next, you suddenly land on the newsletter checkbox, then the search field at the top, then back at an address field. You lose track completely – even though you can see what’s happening. A logical focus order improves accessibility because it: - helps **people with motor impairments** who rely on the keyboard and need a predictable path through the page, - gives orientation to **blind people and people with low vision** who use screen readers and rely on the logical structure, - supports **people with reading disabilities**, who can become disoriented when focus jumps somewhere unexpected, - helps **screen magnifier users**, who only see a small part of the page and quickly get lost without a logical order. And not least: it makes websites more intuitive for everyone – including people who sometimes prefer the keyboard to the mouse. ## 4. How to meet the criterion The good news: a logical focus order usually isn’t rocket science – but it does take deliberate planning. Here are the most proven tips: **Ground rules for a good focus order:** - **Follow the reading order:** In languages like English or German, that means top to bottom and left to right. - **Keep related things together:** Form fields in one section should receive focus one after another, not mixed with other areas. - **Rely on source order:** Without scripts and `tabindex`, focus follows the order in the HTML. If that’s logical, focus usually is too. **Technical implementation:** - **Align HTML order with visual order:** CSS techniques such as flexbox `order`, grid placement or absolute positioning only change the presentation, not the focus order. If the two diverge significantly, focus appears to jump around at random. - **Use `tabindex` deliberately:** - `tabindex="0"` adds an element that isn’t normally focusable to the natural order. - `tabindex="-1"` makes an element focusable via script without adding it to the tab order. - Avoid values greater than 0 – they override the natural order and are hard to maintain. - **Integrate dynamic content properly:** Insert new elements at a sensible place in the source – usually right after the element that triggered them. **Common pitfalls:** - **Visual reordering with CSS:** If you rearrange elements visually, check that the focus order still makes sense. - **Badly implemented modal dialogs:** When a dialog opens, focus must move into it and stay there until it’s closed. Afterwards, focus should return to the element that opened it. - **Forgotten dynamic content:** Dropdown menus, accordions and similar elements must appear at the right place in the focus order – and hidden content must not receive focus. Closely related are [Meaningful Sequence](https://barrierefreihochzwei.de/en/wcag/1-3-2-meaningful-sequence), [Focus Visible](https://barrierefreihochzwei.de/en/wcag/2-4-7-focus-visible) and [No Keyboard Trap](https://barrierefreihochzwei.de/en/wcag/2-1-2-no-keyboard-trap). ## 5. Why this criterion matters for businesses A logical focus order isn’t just an accessibility requirement – it pays off in several areas. ### 1. A better experience for everyone A well-thought-out focus order makes your website easier for everyone to use. When forms can be completed intuitively with a keyboard, frustration drops and more people complete their order or enquiry. This is especially important for online shops and complex applications. ### 2. Clean structure Accessibility isn’t a direct ranking factor. But a logical HTML order – which usually also means a good focus order – makes your content easier for both people and machines to understand. That’s an indirect benefit. ### 3. Lower development costs A page that’s well structured from the start is easier to maintain and produces fewer bugs. If the focus order is right, you avoid later fixes and complicated JavaScript workarounds. And finally: 2.4.3 is a Level A criterion and therefore part of WCAG 2.1 AA, which the harmonised standard EN 301 549 references. Under the European Accessibility Act (EAA), many consumer services such as online shops must meet these requirements; in Germany, the EAA is implemented by the Barrierefreiheitsstärkungsgesetz (BFSG), which has applied since 28 June 2025. This is general information, not legal advice. ## 6. The success criterion in the W3C’s words > **Success Criterion 2.4.3 Focus Order (Level A)** > > If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. In short: where order matters, keyboard focus must reach elements in a way that preserves meaning and operability. **Official explanation from the W3C** The W3C explains every success criterion in depth – with intent, examples and techniques. [Understanding 2.4.3](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) ## More criteria from “Operable” [ 2.1.1 Level A ### Keyboard When every click can also be a keystroke. ](https://barrierefreihochzwei.de/en/wcag/2-1-1-keyboard) [ 2.1.2 Level A ### No Keyboard Trap When there’s no way out. ](https://barrierefreihochzwei.de/en/wcag/2-1-2-no-keyboard-trap) [ 2.1.3 Level AAA ### Keyboard (No Exception) When everything really has to work by keyboard. ](https://barrierefreihochzwei.de/en/wcag/2-1-3-keyboard-no-exception)