Maintain logical and semantic focus order across the page
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Focus must follow a logical, top-to-bottom, left-to-right order that matches the visual layout.
Overview
Why this matters
Keyboard and assistive-technology users depend on a predictable focus sequence. When focus jumps in an order that does not match the visual and semantic flow, users lose context and may miss required controls.
How to fix this issue
Ensure DOM order reflects intended reading and interaction order, then style around that structure. Avoid using CSS reordering (`order`, reverse directions) on interactive controls unless you also correct source order.
Developer Guidance
Treat focus order as part of component contract. In design reviews, test at responsive breakpoints because reordered layouts often break only on mobile or wide desktop variants. Prefer one source order that works for all breakpoints; if layouts differ dramatically, render alternate structures carefully instead of visually reordering shared controls.
Code Examples
Incorrect Implementation
<div class="actions" style="display:flex; flex-direction:row-reverse;">
<button>Cancel</button>
<button>Save</button>
</div>
<!-- Visual: Cancel then Save; focus can become Save then Cancel -->Correct Implementation
<div class="actions" style="display:flex;">
<button>Cancel</button>
<button>Save</button>
</div>Real-World Implementation
Before
A checkout page visually places 'Review Order' before 'Place Order' on mobile, but DOM order remains desktop-first, causing keyboard focus to jump to submit before review.After
Checkout components are rendered in the same order users see them at each breakpoint, so keyboard focus progresses from cart summary to review controls and then submit.CSS Example (Guidance)
.actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Keep source order aligned; avoid using `order` to move focusable controls */Manual Testing
- 1. Navigate the page using Tab and Shift+Tab only, without mouse interaction.
- 2. Verify focus movement matches visible reading order in each section.
- 3. Repeat at mobile and desktop breakpoints to catch responsive reordering issues.
- 4. If focus jumps unexpectedly, inspect for CSS/order-based visual reflow of interactive elements.
- 5. Re-test after DOM/order fixes and confirm screen reader traversal follows the same logical sequence.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance