Element's focus order does not match the DOM reading order
| Field | Value |
|---|---|
| Rule code | Element_FocusOrder_MisMatch |
| WCAG conformance level | A |
| WCAG success criterion | 2.4.3 Focus Order |
| Must be fixed at source | No |
Description
We detected an explicit tabindex attribute value that is different than the expected DOM reading order. Interactive elements (elements that can be focused to) should be accessed in the same sequence as the visual order presented when accessed via the keyboard. If the visual tabindex order does not match the keyboard tabindex order, users may become disoriented in navigating the page. It is recommended to not explicitly set tabindex values. If explicit tabindex values are needed, they should be set to 0 (numeric value) to specify that the element should fall within regular tabindex reading order. For elements that should be left out of the natural tab order, the tabindex attribute numeric value can be set to -1 so that they do not receive keyboard tabbing focus.
How to fix
Ensure interactive elements are navigable in visual sequence by avoiding explicit tabindex values, or by setting tabindex="0" for natural order inclusion and tabindex="-1" for exclusion from keyboard focus.