• Success Criterion 3.2.1
  • Conformance level A

Selecting an Option That Submits the Form Automatically

3.2.1 — On Focus

Scenario

Setting

A nonprofit's donation form

What’s wrong

Focus on a select/radio submitting the form.

Example 

<select id="donation-frequency" onfocus="document.forms[0].submit()">
  <option>One-time</option>
  <option>Monthly</option>
</select>

Why it matters

Tabbing into the donation frequency dropdown submits the whole form before the donor has chosen an amount or frequency, potentially charging the wrong thing.

How to test

Tab to a select/radio and stop, without pressing Enter or a submit button: if the form submits automatically, it fails.

How to fix

Submission should only follow an explicit submit action, never simply receiving focus.

<select id="donation-frequency">
  <option>One-time</option>
  <option>Monthly</option>
</select>
<button type="submit">Donate</button>

Outcome

A donor tabs to the frequency dropdown, makes a selection, and submits only when ready.

Who is affected

Keyboard users navigating the donation form can't even reach this field without triggering an unintended submission.

Learn more

Related scenarios