The “Sequential Focus Order Check” evaluates whether elements in the DOM follow a logical, meaningful focus sequence when navigated via the keyboard.
Example outcome
I found 1 element in the sequential focus order.
Impact
Visual Impairments: Users with visual impairments rely on screen readers and keyboard navigation. If focus skips around or doesn’t follow visual flow, it’s hard to understand context.
Motor Impairments: Tab-based navigation is essential for people using alternative input devices like switches or on-screen keyboards.
Cognitive Disabilities: Unpredictable focus order can be disorienting, leading to confusion and frustration.
Fixes
To address inappropriate sequential focus order:
Locate the elements that are focused in an incorrect order.
Rearrange them in the source code so that their order in the DOM matches how they appear on the screen.
Additionally, don’t manually assign tabindex values unless you must. Using tabindex="1" overrides natural focus order and can cause major confusion.
Use tabindex="0" sparingly for custom elements. This allows the custom element to be focusable while maintaining the natural flow.