Skip to content

element_01.md

Latest commit

 

History

History
45 lines (33 loc) · 1.78 KB

element_01.md

File metadata and controls

45 lines (33 loc) · 1.78 KB
Title Sequential Focus Order Check
id element_01
type true
elem all
test seqFocus
score 10
level AA
trust 1
ref oj04fd
scs 2.4.7
dis 43353
result warning

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:

  1. Locate the elements that are focused in an incorrect order.
  2. Rearrange them in the source code so that their order in the DOM matches how they appear on the screen.
  3. Additionally, don’t manually assign tabindex values unless you must. Using tabindex="1" overrides natural focus order and can cause major confusion.
  4. Use tabindex="0" sparingly for custom elements. This allows the custom element to be focusable while maintaining the natural flow.

Resources