WCAG 2.2 - Success Criterion
2.4.3 Focus Order
Description
If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components must receive focus in an order that preserves meaning and operability. This means that as users press Tab to move through a page, the order in which interactive elements receive focus must follow a logical reading and interaction sequence - typically matching the visual top-to-bottom, left-to-right order of the content.
How To Test
- Use only the keyboard and press Tab repeatedly to move through all focusable elements on the page.
- Observe the order in which elements receive focus and compare it to the visual and logical reading order.
- Note any instances where focus jumps backward, skips a section, or moves to an unexpected location.
- Inspect the DOM using browser DevTools to check whether the source order differs significantly from the visual layout.
- Search for any elements with positive
tabindexvalues (1 or higher) that may be forcing an unnatural focus order. - Test interactive widgets such as modal dialogs to confirm focus moves into the dialog when it opens and returns to the trigger when it closes.
Testing Tools
- axe DevTools — Browser extension. Install from official page, open DevTools, go to axe tab, run scan. Look for focus order, keyboard trap, and focus visible violations.
- NVDA — Free screen reader for Windows. Download and install, then open Firefox and navigate the demo using Tab, Shift+Tab, arrow keys, and Enter. Listen for focus announcements.
- Browser DevTools Accessibility Inspector — Built into all browsers. Right-click on a focused element, select "Inspect", open DevTools, go to Accessibility tab to see the accessibility tree and focus properties.
Demo
The buttons appear visually as Step 1 → Step 2 → Step 3, but positive tabindex values override DOM order. Pressing Tab moves focus: Step 2 → Step 3 → Step 1.
The same buttons use no tabindex overrides. Tab follows DOM order: Step 1 → Step 2 → Step 3, matching the visual and logical sequence.
Code
CSS flexbox order property visually moves the sidebar to the left, but it remains first in the DOM. Pressing Tab goes: main skip link, then sidebar (DOM first), then main content (DOM second). Focus jumps backward visually.
Main Content
Appears first visually but second in DOM.
DOM order matches visual layout. Elements appear in the same order both visually and in the keyboard Tab sequence. Focus moves left-to-right: main content, then sidebar.
Main Content
First in DOM, first visually.
Code
Click "Open Modal" then press Tab repeatedly. Focus escapes the modal and reaches the page behind it. Found in 15 real-world audits (search overlays, filter modals, dialogs).
Confirm Action
Are you sure you want to proceed?
No focus trap — Tab escapes to background content.
Same modal with aria-modal="true" and JavaScript focus trap. Tab cycles only within the modal. Escape closes it.
Confirm Action
Are you sure you want to proceed?
Focus trapped in modal. Escape closes and returns focus to trigger button.
Code
Fail Explanation
A failure occurs when the tab order jumps unpredictably across the page - for example, tabbing from a form field in the header straight to the footer, then back to the middle of the page, then to a sidebar. This commonly happens when CSS is used to visually reorder content without updating the underlying DOM order, or when tabindex values are set to large positive integers that override the natural DOM sequence. Disordered focus order disorients keyboard users and makes it very difficult for screen reader users to build a mental model of the page.
Pass Explanation
A passing implementation achieves a logical focus order by ensuring the DOM source order matches the intended reading and interaction sequence, so that the default tab flow (which follows DOM order) is already correct. Where visual reordering is necessary (e.g., through CSS flexbox order or position: absolute), the DOM order must still be arranged logically. Use of positive tabindex values (anything above 0) should be avoided; using tabindex="0" and tabindex="-1" is acceptable and recommended.
Notes
Focus order does not need to be identical to visual reading order in every case - only when the order affects meaning or operation. For example, a search field followed by search results does not require a rigid order as long as the relationship is clear. However, modal dialogs, inline error messages, and dynamically inserted content do require careful focus management to avoid confusion.
Techniques
WCAG techniques used in this demo: H4, G59
Suggested Solutions & References
Curated from 56 real-world audit findings and official WCAG guidance.