• Success Criterion 3.2.2
  • Conformance level A
  • W3C reference F37

Selecting an Option That Opens a New Window With No Warning

3.2.2 — On Input

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Choosing a radio button, checkbox, or dropdown option suddenly opens a new window or jumps somewhere else without warning the user first.

Example 

<select onchange="if(this.value==='mail-order') window.open('/mail-order-info')">
  <option value="pickup">In-store pickup</option>
  <option value="mail-order">Mail order</option>
</select>

Why it matters

Choosing Mail order silently pops open a new window over the refill form, and a user who didn't notice the new tab keeps trying to fill in a form that no longer has focus.

How to test

Interact with an input control and watch for a new window/tab opening with no prior warning: if it opens unannounced, it fails.

How to fix

Surface a link the user chooses to activate, labeled as opening a new window, rather than triggering one from a selection change.

<select id="delivery-method">
  <option value="pickup">In-store pickup</option>
  <option value="mail-order">Mail order</option>
</select>
<p id="mail-order-note" hidden>
  Mail order details (opens in a new tab): <a href="/mail-order-info" target="_blank">Learn more</a>
</p>

Outcome

A patient selects mail order and decides for themselves whether to open more details.

Who is affected

Screen reader and low-vision users may not notice a new window opened at all and get stuck wondering why the form stopped responding.

Learn more

Related scenarios