Sequential Focus Order Check
Description
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. Usingtabindex="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.