Level AWCAG 2.2

3.2.2 On Input

Changing the setting of any UI component does not automatically cause a change of context.

Why it matters

Keyboard operation

When operating a dropdown with arrow keys, each option can trigger navigation if change handlers navigate.

Screen readers

If the screen changes before users can review the options, they cannot understand the choices.

Cognitive impairment

A UI whose outcome cannot be predicted creates anxiety and confusion.

Mobile

Mistaps are frequent on touch, and instant navigation is hard to undo.

Live demo

Navigation triggered by a dropdown

Selecting an option immediately navigates

Destination page:

Keyboard problem

1.Open the dropdown with the keyboard (Down Arrow)

2.The page changes as soon as focus lands on the first option

3.The user cannot reach the third option at all

If you auto-navigate from a dropdown's onchange handler, keyboard users trigger page changes just by moving through options with the arrow keys. Provide a separate confirmation button instead.

Persona perspective

Kimura (38) — Totally blind

When I try to explore dropdown options with arrow keys, the first option immediately navigates to a new page. I can't even reach the third option. A separate 'Go' button lets me browse the options safely.

Checkpoints

Dropdown onchange does not navigateSelecting a checkbox alone does not submit the formFocus is not automatically moved while typingSetting changes are committed via a Save buttonIf a change of context is required, explain it in advance

References

→ Understanding SC 3.2.2 (W3C)