What is WCAG 2.4.3 Focus Order?

WCAG 2.4.3 is a Level A success criterion that requires web pages to receive focus in an order that preserves meaning and operability. When a user tabs through interactive elements, the sequence must make logical sense so keyboard and screen-reader users can understand and operate the content.

What causes a broken focus order?

The most common cause is using positive tabindex values (tabindex="1", tabindex="2", etc.). Positive tabindex moves elements to the front of the tab sequence regardless of their DOM position, which often creates a confusing, non-linear path. The correct approach is to rely on the natural DOM order and use tabindex="0" only when making a non-interactive element focusable.

What is the difference between tabindex="0" and tabindex="-1"?

tabindex="0" adds an element to the natural tab sequence at its DOM position. tabindex="-1" removes an element from the tab sequence but still allows programmatic focus via JavaScript focus() calls, which is useful for modal dialogs and custom widgets that manage focus internally.

How do I audit focus order on a real page?

Press Tab repeatedly starting from the browser address bar and observe where focus lands at each step. Alternatively, open DevTools and run document.querySelectorAll('[tabindex]') to find elements with explicit tabindex attributes. Any positive value is a red flag. Browser extensions such as axe DevTools or IBM Equal Access Checker can also flag focus-order violations automatically.

Does CSS visual order matter for focus order?

No. Focus order follows DOM order, not visual CSS order. If you use CSS Flexbox or Grid with "order" or "flex-direction: row-reverse", the visual layout can differ from the DOM sequence, which creates a mismatch. WCAG 2.4.3 requires that the focus sequence make sense in relation to the page meaning, so if visual order is meaningful, the DOM order should match it.

When is it acceptable to use a positive tabindex?

Almost never in a standard web page. The only rare legitimate use is legacy widget toolkits where restructuring the DOM is not feasible. In all other cases, restructure the DOM to match the desired focus order and use tabindex="0" sparingly only when needed.

Focus Order Helper

Name: Focus Order Helper
Availability: InStock
Author: Nham Vu

Learn WCAG 2.4.3 focus order rules and interact with live demos showing correct and incorrect tab sequences on a simulated form.

Choose a Demo

This form uses natural DOM order with no positive tabindex values. Tab sequence follows the visual top-to-bottom layout.

Step Through Focus

Step 0 / 6

Click Next Focus to begin stepping through the form elements.

Focus Sequence Map

Live Demo Form

Focus Order Audit Checklist

Tab through the page using only the keyboard — does the sequence feel logical?
Search for positive tabindex values — any tabindex > 0 is a red flag.
Check that CSS visual order matches DOM order (watch for flex/grid "order" overrides).
Verify modal dialogs trap focus inside and restore focus to the trigger on close.
Confirm every interactive element has a visible focus ring (WCAG 2.4.11 / 2.4.7).
Test with a screen reader (NVDA + Firefox or VoiceOver + Safari) for final validation.

0 of 6 items checked

Summary

Learn WCAG 2.4.3 focus order rules and interact with live demos showing correct and incorrect tab sequences on a simulated form.

How it works

Choose the "Correct Order" or "Broken Order" demo tab to load a sample form.
Click "Next Focus" (or press Tab in the demo area) to advance focus one step at a time.
A highlighted ring and indicator label show which element is currently focused.
The step counter and sequence map update in real time so you can see the full path.
Switch to the "Broken Order" demo to observe how positive tabindex values scramble the natural sequence.
Read the explanation panel for each step to understand why that order is correct or problematic.
Use the checklist at the bottom to audit focus order in your own projects.

Use cases

Learn WCAG 2.4.3 Focus Order requirements before a compliance audit.
Demonstrate broken tab order to stakeholders to justify accessibility fixes.
Train development teams on why positive tabindex values are harmful.
Quick reference for writing keyboard-accessible forms and dialogs.
Self-check tool before submitting a VPAT or accessibility conformance report.
Classroom aid for web accessibility courses covering keyboard navigation.

Frequently Asked Questions

Related tools

Aria Role Reference Wcag Contrast Checker Tap Target Size

Last updated: 2026-05-29 · Reviewed by Nham Vu