Do not auto-submit when the last field changes
F36 is a documented failure under the on input rule, and it is more specific than its usual summary. The failure is submitting the form and presenting new content when the last field is given a value. Not any field. The last one, which is where the usual summary goes broader than the technique. Two reasons sit behind it and most write-ups carry only the second. Somebody who needs more context may move focus away from the field to read the instructions, and that alone submits the form. And with some controls the value changes as each option is arrowed past, so the form submits on an option nobody chose. The rule allows the behavior in one case, which is where the user has been told what will happen before using the control. Almost nobody does that well, and the ordinary answer is better anyway. Use the submit button and the Enter key the browser already gives you.
How we find it in an audit
Reviewers fill every form from the top, then tab out of the last field, and see whether the page changes. Then they do it backward, because a form wired this way submits when the tab order runs the other way too, which surprises the developers who built it. Automated tools can find a submit call inside a change handler. Whether the field is the last one, and whether anybody was warned, takes reading.
How affected users experience it
A screen reader user reaches the last box of a phone number, moves focus away to re-read the format instructions, and the form submits with two thirds of the number entered. Nothing warned them, and there is no undo. For someone arrowing through a select, the form submits on the first option they pass rather than the one they wanted, so browsing the list is impossible and the only safe move is a guess. Both of them end up filling your form more slowly and more anxiously than anybody intended.
Passes vs. fails
Passes
<select name="state">
<option>Choose your state</option>
</select>
<button type="submit">Continue</button>Fails
<select name="state" onchange="this.form.submit()">
<option>Choose your state</option>
</select>The other techniques filed under this rule
8 guides on this site are filed under 3.2.2 On Input. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- G13sufficientSay what a control will do before it does it
- G80sufficientUse a submit button, not automatic submission
- H32sufficientGive every form a real submit button
- H84sufficientPair select menus with a real action button
- PDF15sufficientGive PDF forms an explicit submit button
- SCR19sufficientNever change context when a select changes
This guide is our interpretation of W3C technique F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and … given a value. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.