Focus order is not logical in such a way that it affects the meaning or operability of the content.

Link to Focus order is not logical in such a way that it affects the meaning or operability of the content. copied to clipboard
Rule ID:
tab-order-illogical
User Impact:
Serious
WCAG :
2.4.3.a

Rule

The reading and navigation order MUST be logical and intuitive.

Background

When keyboard focusable components do not receive focus in a logical order, people with mobility impairments, reading disabilities, and low vision are all impacted. The keyboard focus order must be logical and consistent with the layout of the content. (Note: This does not mean that the focus order has to be identical to the visual order, as long as the user can still understand and operate the content.) A logical focus order makes interaction with content predictable for people who rely on a keyboard to interact with a web content.

How To Fix

Fix this issue by ensuring the DOM order is logical so that the focus order will naturally follow. Do not use positive tabindex values to "correct" the tab order as it will not change the reading order for screen reader users and will almost always cause unintended, significant problems.

References