- Success Criterion 3.2.2
- Conformance level A
Toggle Switch That Immediately Saves and Redirects the User
3.2.2 — On Input
Scenario
Setting
A fashion e-commerce site's checkout page
What’s wrong
Toggle switches immediately saving+redirecting.
Example
<input type="checkbox" role="switch" onchange="saveGiftWrap(this.checked); location.href='/checkout/payment'">Why it matters
Toggling gift wrap on immediately saves the choice and redirects to the payment step, so a shopper who also wanted to add a gift note never gets the chance.
How to test
Flip a toggle switch: if it immediately saves and redirects elsewhere with no warning, it fails.
How to fix
Save the toggle's state quietly, but leave navigation to an explicit Continue action.
<input type="checkbox" role="switch" onchange="saveGiftWrap(this.checked)">
<button type="submit">Continue to Payment</button>Outcome
A shopper turns on gift wrap, adds a note, and moves to payment when they're ready.
Who is affected
Users navigating by keyboard or screen reader lose the ability to make several related choices on the same page before moving forward.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Form That Submits Itself the Moment the Last Field Is Filled
- Selecting an Option That Opens a New Window With No Warning
- Dropdown That Navigates to a New Page on Selection
- Checking a Box That Reloads the Page and Loses Entries
- Country Selector That Re-Renders the Form and Drops Focus
- Search Box That Auto-Navigates Once Enough Characters Are Typed