1. Objective
Ensure that focusable components on the page receive focus in an order that preserves the meaning and operability of the content, as required by Success Criterion 2.4.3 – Focus Order (Level A) of WCAG:
"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."
2. Scope
- Includes all interactive elements accessible via Tab / Shift+Tab.
Note: To avoid false positives, elements that are collapsed in the normal state are omitted, since removing styles makes them appear immediately after their trigger.
3. "Source of Truth" for Tab Order
- Default Tab Order = Source Code Order = The Order With Styles Turned Off
- We interpret "logical order" as position in the DOM, without considering visual CSS presentation.
4. Verification Flow
Extract element list
- Traverse the DOM and list all focusable elements (links, buttons, form fields, etc.) in the order they appear in the HTML source code.
Traverse with keyboard
- From the root of the area under test, advance with Tab / Shift+Tab and record the actual focus sequence.
Compare sequences
- If they match, the focus order is consistent.
- If they do not match, proceed to step 4.
Validate the scope of the problem
- Determine whether the displaced elements are collapsed or hidden by CSS.
- Discard these cases (as they should not be tabbed to in the normal state).
Report inconsistency