In this WCAG Fix It guide, we’re breaking down an important accessibility requirement: making sure keyboard focus moves through the page in a logical order.
When users navigate with a keyboard, they move between interactive elements using the Tab key.
But if focus jumps around unpredictably or skips content entirely, navigation becomes confusing and difficult to follow, so when users lose their place on a page, the experience quickly breaks down.
What Is WCAG 2.4.3?
WCAG 2.4.3 – Focus Order requires that if a web page can be navigated sequentially and navigation affects meaning or operation, focus must move in an order that preserves meaning and usability.
This simply means that when users tab through the page, the focus order should match the logical reading order.
This means focus should move:
- From top to bottom
- From left to right (in most languages)
- Following the visual structure of the page
Users should never feel like they are jumping randomly across the interface.
What Is Keyboard Focus Order?
Focus order refers to the sequence in which interactive elements receive keyboard focus when pressing the Tab key.
Common focusable elements include:
- Links
- Buttons
- Form inputs
- Dropdown menus
- Navigation items
- Interactive widgets
The order should follow the natural flow of the page content. When focus order is incorrect, users may jump from one part of the page to another unexpectedly.
The Human Impact of Incorrect Focus Order
Imagine navigating a checkout form using only the keyboard.
You press Tab.
Focus moves from:
- First Name field
- Then jumps to the footer
- Then back to the address field
- Then into a hidden menu
You lose your place instantly or imagine a page where focus jumps from the navigation menu straight to a sidebar widget before reaching the main content. This breaks the reading flow and makes navigation confusing.
Users should be able to move through content in a predictable order. Without that, tasks become frustrating and error-prone.
Common WCAG 2.4.3 Failures
Here’s what we typically see when scanning websites:
- Focus jumping to hidden elements
- Navigation menus skipped entirely
- Sidebar widgets receiving focus before main content
- Forms where fields are tabbed in the wrong order
- Custom components interrupting logical navigation
- Layout changes created with CSS positioning that disrupt DOM order
All of these can fail WCAG 2.4.3.
How to Fix Focus Order Issues
Follow the Natural HTML Structure
Focus order usually follows the order of elements in the HTML.
For example:
<header>
<nav>Navigation</nav>
</header>
<main>
<h1>Page Title</h1>
<p>Main content</p>
</main>
If the HTML structure matches the visual layout, focus order will typically work correctly.
Problems often occur when layout is controlled heavily through CSS rather than logical structure.
Avoid Using Positive tabindex Values
Example of bad practice:
<button tabindex=”5″>Submit</button>
Positive tabindex values override the natural order and often create unpredictable navigation.
Best practice:
Use the natural DOM order and avoid manually forcing tab sequences.
Ensure Hidden Elements Are Not Focusable
Elements that are visually hidden should not receive focus.
For example, menus that are collapsed should remove focusable elements until the menu opens.
Otherwise, keyboard users may tab into invisible content.
Keep Forms in Logical Order
Form fields should follow a clear and predictable sequence.
Example:
- First Name
- Last Name
- Email Address
- Phone Number
If the focus jumps around the form, users may fill fields incorrectly or miss required inputs.
If You’re Using a CMS or Website Builder
Focus order issues often occur when:
- Page builders rearrange layout visually
- Custom navigation components are added
- Widgets or popups insert elements into the DOM
- CSS positioning changes the visual order
To fix:
- Check the HTML structure
- Test keyboard navigation regularly
- Avoid manual tabindex adjustments
- Ensure visual layout matches DOM order
How to Test WCAG 2.4.3
The simplest test is also the most effective.
Put your mouse aside and use only the keyboard.
Press Tab repeatedly and watch how focus moves through the page.
Ask yourself:
- Does focus move in a logical order?
- Does it follow the page layout?
- Are important elements skipped?
- Does focus jump unexpectedly?
If the navigation feels confusing, the focus order likely needs fixing.
After updates, re-run your accessibility scan and confirm the issue is resolved.
Why WCAG 2.4.3 Matters Beyond Compliance
Logical focus order:
- Improves keyboard navigation
- Supports screen reader users
- Makes forms easier to complete
- Improves overall usability
- Reduces user frustration
- Reduces legal risk
When navigation follows a predictable order, users stay oriented and in control.
Accessible navigation isn’t just about keyboard support. It’s about making sure the journey through a page makes sense.
WCAG 2.4.3 Quick Fix Checklist
Focus order follows the visual layout
Navigation menus appear in logical order
Forms tab through fields sequentially
Hidden elements are not focusable
Positive tabindex values avoided
Keyboard navigation tested across the page
Issues re-tested after updates
WCAG 2.4.3 Focus Order Frequently Asked Questions
What is WCAG 2.4.3 Focus Order?
WCAG 2.4.3 requires that keyboard focus moves through a webpage in a logical order that preserves meaning and usability.
What causes incorrect focus order?
Focus order issues often occur when elements are visually rearranged with CSS but remain in a different order in the HTML.
Should I use tabindex to control focus order?
Positive tabindex values should generally be avoided because they can create confusing navigation sequences.
How do I test focus order?
Use the Tab key to move through the page and ensure focus follows the logical reading order.