WCAG 2.4.3 — Focus Order — focus order is illogical

Who Is Affected

Keyboard-only users (including people with motor disabilities who cannot use a mouse), screen reader users, users with cognitive disabilities who rely on predictable navigation patterns, and power users who prefer keyboard shortcuts.

What This Means

Focus order determines the sequence in which interactive elements receive keyboard focus when a user presses the Tab key. The focus should move logically through the page — typically left to right, top to bottom — following the visual layout and content flow.

When focus order is illogical, users may tab to a button in the footer, then jump to a link in the header, then to a form field in the middle of the page. This creates confusion and makes it difficult or impossible for keyboard users to complete tasks efficiently.

Common causes include CSS positioning that moves elements visually without updating the DOM order, improper use of tabindex values, or dynamically inserted content that appears out of sequence.

Fix: CMS / Theme

Focus order problems are often caused by theme layouts that use CSS to reposition elements without considering the underlying HTML structure.

1. Test the current focus order: Press Tab repeatedly through your site and note where the focus indicator goes. It should follow a logical path through the visible content.

2. Identify problematic elements: Look for focus jumps between distant parts of the page, or focus moving to invisible elements.

3. Check CSS positioning:

   • In Joomla, examine your template's CSS files for position: absolute, float, or flexbox/grid properties that might be disrupting visual order.
   • In WordPress, check your theme's style.css and any custom CSS for layout properties.

4. Fix the HTML source order: The most reliable solution is to match the HTML structure to the visual layout:

   • Move misplaced elements in your template files to appear in the correct DOM position.
   • For Joomla: Edit template PHP files in Extensions → Templates → Your Template → PHP.
   • For WordPress: Edit theme template files in Appearance → Theme Editor.

5. Remove problematic tabindex: Remove any tabindex values greater than 0, as these create unpredictable focus order. Only use tabindex="0" (to add an element to the tab order) or tabindex="-1" (to remove an element from tab order).

6. Test with screen reader: Use NVDA or JAWS to verify the reading order matches the visual order.

Fix: Content Editor

For content-level focus order issues:

1. Review custom content blocks: If you've added custom HTML or embedded widgets, ensure they appear in the page source in the same order as the visual layout.

2. Check form field order: When creating forms, add fields in the order users should complete them. Don't rely on CSS to reposition form elements.

3. Remove custom tabindex: If you've added tabindex attributes to content elements, remove them unless absolutely necessary. Let the browser use the natural DOM order.

4. Test before publishing: Tab through your page before publishing to ensure the focus flows logically.

Standard Reference

WCAG 2.1 Success Criterion 2.4.3 — Focus Order, Level A

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

• W3C Understanding SC 2.4.3
• WCAG Technique G59 — Placing interactive elements in order of tab sequence
• WCAG Technique H4 — Creating logical tab order through links, form controls, and objects
• WCAG Technique C27 — Making DOM order match visual order
• WCAG Failure F44 — Using tabindex to create tab order that does not preserve meaning
• WCAG Failure F85 — Using dialogs or menus that are not adjacent in DOM