Maintain logical and semantic focus order across the page
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
The order in which elements receive focus should match the visual and logical reading order. A mismatch confuses screen reader users and causes navigational errors.
How to fix this issue
Ensure focus moves in a logical sequence through interactive elements following the visual layout. Avoid using CSS or JavaScript that reorders DOM elements out of sequence.
Developer guidance
Test with the Tab key alone. The focus should move naturally through headers, main content, and footers in the order users expect.
Code examples
Incorrect Implementation
<header><a href='#main'>Skip</a></header><footer><a href='#home'>Home</a></footer><main>Content</main>Correct Implementation
<header><a href='#main'>Skip to main</a></header><main>Content</main><footer><a href='#home'>Home</a></footer>
Trusted by organizations across Europe working toward WCAG and EAA conformance