tab-order
Focusable elements should receive focus in an order that preserves meaning and operability
Description
Keyboard users typically navigate between the controls on the page by pressing the tab key. Each click shifts the focus to the following control according to their position in the DOM. Sometimes, the visual order of the controls on the screen does not match their order in the DOM which may cause some users (especially users with lower vision) to lose their orientation on the page.
Quick Fixes
This condition is usually caused as a result of one of the following factors:
Tabindex
One or more controls has a "tabindex" attribute with a positive value higher than zero.
In this case, the order of the focus sequence is determined by the "tabindex" values and not by the natural DOM flow,
which may cause a discrepancy between the visual appearance of the controls and the order in which they get focused.
Therefore, it is a best practice to avoid using positive values on the "tabindex" attribute.
Absolute positioning
The layout of the page or component is based on absolute positioning, and the controls or their parent element/s are visually placed in an order that's not matching their order on the DOM.
CSS Flex - order
A slightly rarer case is when the controls or their parent elements are placed using the CSS flex's "order" attribute.
Since this feature allows to visually change the order of elements,
there is a risk that the natural focus sequence will be distorted when it is applied to controls or elements
that contain controls within them. So it would be best if you avoided re-arranging layouts using the CSS "order".
How Users Are Affected
Keyboard users, especially those with visual impairments, attention deficit disorders, or certain cognitive impairments, may lose context and orientation and have difficulty completing tasks and processes.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
2.4.3 Focus Order (A)