- Success Criterion 3.2.2
- Conformance level A
Checking a Box That Reloads the Page and Loses Entries
3.2.2 — On Input
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Checking a box reloading the page and losing surrounding context/entries.
Example
<input type="checkbox" onchange="window.location.reload()" id="show-translation">Why it matters
Checking Show translation reloads the whole lesson page, wiping out any answers the learner had already typed into the exercise below.
How to test
Check a checkbox without pressing submit: if the page reloads and loses the surrounding context/other entries, it fails.
How to fix
Toggle visible content with a DOM update, not a full page reload, so surrounding form state survives.
<input type="checkbox" id="show-translation" onchange="toggleTranslation(this.checked)">Outcome
A learner toggles translations on and off without losing anything they'd already typed.
Who is affected
Learners using switch access or those who type slowly lose completed work every time they toggle this one option.
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
- Country Selector That Re-Renders the Form and Drops Focus
- Search Box That Auto-Navigates Once Enough Characters Are Typed
- Radio Selection That Auto-Advances a Multi-Step Wizard