Success Criterion 3.2.2
Conformance level A

Dropdown That Navigates to a New Page on Selection

3.2.2 — On Input

Scenario

Setting

A real-estate marketplace's listing page

What’s wrong

select onchange navigating to a new page (jump menus) with no button and no prior advisement.

Example

<select onchange="location.href=this.value">
  <option value="/listings/1">3-bed house, Maple St</option>
  <option value="/listings/2">2-bed condo, Oak Ave</option>
</select>

Why it matters

Simply arrowing down through listing options to compare them navigates away on every keypress, so a buyer can never review two options before landing on one.

How to test

Change a select dropdown's value without pressing any button: if it navigates to a new page (jump menu pattern) with no prior warning, it fails.

How to fix

Jump menus need an explicit Go button, not automatic navigation on change.

<select id="listing-jump">
  <option value="/listings/1">3-bed house, Maple St</option>
  <option value="/listings/2">2-bed condo, Oak Ave</option>
</select>
<button type="button" onclick="location.href=document.getElementById('listing-jump').value">Go</button>

Outcome

A buyer arrows through several listings and only navigates once they press Go.

Who is affected

Keyboard users arrowing through choices, and screen reader users exploring a select's options, both get bounced to a new page before they can compare.

Learn more

Understanding Understanding document (opens in a new tab)